先上组件的效果图：
?取值打印：
?组件 MultipleSelect/index.vue：
<template>
<div>
<!-- collapse-tags 超过2个省略+ 显示 -->
<el-select
v-model="selectValues"
v-bind="$attrs"
multiple
placeholder="请选择"
style="width: 100%"
@change="changeSelect">
<el-option v-if="options.length > 0 " label="全选" value="全选">
<el-checkbox v-model="isSelectAll" @click.prevent.native>全选</el-checkbox>
</el-option>
<el-option
v-for="item in options"
:key="item[props.value]"
:label="item[props.label]"
:value="item[props.value]">
<el-checkbox v-model="item.isCheck" @click.prevent.native>{{ item[props.label] }}</el-checkbox>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "MultipleSelect",
inheritAttrs: false, // 似乎设不设置都可以
model: {
// prop: "initSelectValues",
event: "change",
},
props: {
// initSelectValues: {
// type: Array,
// default: () => [],
// },
// 下拉选项
options: {
type: Array,
default: () => [],
},
// 选项键值对
props: {
type: Object,
default: () => {
return {
label: "label",
value: "value",
};
},
},
},
data() {
return {
selectValues: [],
isSelectAll: false
}
},
watch: {
// 监听（全选，全不选以及checkbox是否勾选）
selectValues: {
handler(arr) {
this.options.forEach((item) => {
if (arr.includes(item[this.props.value])) {
item.isCheck = true;
} else {
item.isCheck = false;
}
});
if (arr.length === this.options.length) {
this.isSelectAll = true;
} else {
this.isSelectAll = false;
}
// 强制更新（checkbox回显)
this.$forceUpdate();
}
}
},
methods: {
// 改变选中的值
changeSelect(val) {
if (val.includes("全选")) {
// 说明已经全选了，所以全不选
if (val.length > this.options.length) {
this.selectValues = [];
} else {
this.selectValues = this.options.map(
(item) => item[this.props.value]
);
}
}
this.$emit("change", this.selectValues);
}
},
created() {
// 回显
// this.selectValues = this.initSelectValues
},
mounted() {},
destroyed() {
this.$destroy()
this.selectValues = []
}
};
</script>调用的时候 父组件：
<template>
<div>
<MultipleSelect v-model="value" :options="options"></MultipleSelect>
<el-button @click="confirm">确定</el-button>
</div>
</template>
<script>
import MultipleSelect from "@/components/MultipleSelect/index.vue";
export default {
components: { MultipleSelect },
data() {
return {
value: [],
options: [
{
value: "1",
label: "黄金糕",
},
{
value: "2",
label: "双皮奶",
},
{
value: "3",
label: "蚵仔煎",
},
{
value: "4",
label: "龙须面",
},
{
value: "5",
label: "北京烤鸭",
},
],
};
},
methods: {
confirm() {
console.log("value:", this.value);
},
},
created() {},
mounted() {},
destroyed() {
this.$destroy();
},
};
</script>
最后为了方便大家的沟通与交流请加QQ群：?625787746
请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140
