本文主要是介绍基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图：
组件：MultipleSelect.vue
<template><el-select v-model="selectValues" v-bind="$attrs" v-on="listeners" multiple placeholder="请选择" style="width: 50%" @change="changeSelect"><el-option v-if="options.length" 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>
</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()}}},created() {// 回显this.selectValues = this.initSelectValues},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)}}
}
</script><style>
</style>
使用：index.vue
<template><div id="app"><MultipleSelect v-model="value" :options="options"></MultipleSelect><el-button @click="confirm">确定</el-button></div>
</template><script>
import MultipleSelect from "./components/MultipleSelect"
export default {name: 'App',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)}}
}
</script><style></style>
多选框多选不换行
/* 输入框超出隐藏，不换行*/.el-select__tags {flex-wrap: nowrap;overflow: auto;}/* 输入框最大宽度*/.el-select__tags-text {max-width: 90px;}
这篇关于基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
