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 {
|
||||
border: 1px solid @borderColor;
|
||||
overflow: visible !important;
|
||||
transform: translateZ(0);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
|
|
Loading…
Reference in New Issue
Block a user