feat: 新增带全选的下拉菜单
This commit is contained in:
parent
1417c101bf
commit
4d4ae0f58d
72
src/components/CustomSelectWithAllChecking.vue/index.vue
Normal file
72
src/components/CustomSelectWithAllChecking.vue/index.vue
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<a-select v-bind="$attrs" v-model="innerValue" mode="multiple" allow-clear :options="options">
|
||||||
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||||
|
<div slot="dropdownRender" slot-scope="menu">
|
||||||
|
<v-nodes :vnodes="menu" />
|
||||||
|
<a-divider style="margin: 4px 0" />
|
||||||
|
<div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
|
||||||
|
<a-checkbox v-model="isSelectAll" :disabled="!options.length">
|
||||||
|
<span @click.prevent="isSelectAll = !isSelectAll"> ALL </span>
|
||||||
|
</a-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-select>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Array, Number],
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
VNodes: {
|
||||||
|
functional: true,
|
||||||
|
render: (h, ctx) => ctx.props.vnodes,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
innerValue: {
|
||||||
|
set(val) {
|
||||||
|
this.$emit('input', val)
|
||||||
|
},
|
||||||
|
get() {
|
||||||
|
return this.value
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
isSelectAll: {
|
||||||
|
set(val) {
|
||||||
|
if (val) {
|
||||||
|
this.$emit(
|
||||||
|
'input',
|
||||||
|
this.options.map((item) => item.value)
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.$emit('input', [])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
get() {
|
||||||
|
return !!this.options.length && this.value.length === this.options.length
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.ant-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-select-dropdown-content {
|
||||||
|
position: relative;
|
||||||
|
background: #03353f;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -547,6 +547,8 @@ input[type='number']::-webkit-outer-spin-button {
|
||||||
.ant-select-dropdown-content {
|
.ant-select-dropdown-content {
|
||||||
border: 1px solid @borderColor;
|
border: 1px solid @borderColor;
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
|
transform: translateZ(0);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -6px;
|
top: -6px;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user