结合checkbox带全选/搜索功能的下拉框
页面效果
vue.js，element-ui相关
- html部分
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<el-select v-model="selectedArray" size="small" multiple collapse-tags clearable width="220px"
@change='changeSelect'>
<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="selectParam" size="mini" @change="search">
</el-input>
<el-option :label='all.label' :value='all.value' @click.native='selectAll'>
<input type="checkbox" :checked="selectedArray.includes(all.value)">{{all.label}}
</el-option>
<el-option v-for="items in cities" :key="items.value" :label="items.label" :value="items.value">
<input type="checkbox" :label="items.label" :checked="selectedArray.includes(items.value)">{{items.label}}
</el-option>
</el-select>
{{selectedArray}}
</div>
</template>
- js部分
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
const cpn = {
template: '#cpn',
data() {
return {
selectParam:'',
isChecked: false,
all: {
value: 'all',
label: '全部'
},
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}],
selectedArray: []
}
},
methods: {
selectAll() {
if (this.selectedArray.length < this.cities.length) {
this.selectedArray = [];
this.cities.map((item) => {
this.selectedArray.push(item.value)
});
this.selectedArray.unshift(this.all.value);
} else {
this.selectedArray = [];
}
},
changeSelect(val) {
if (!val.includes(this.all.value) && val.length === this.cities.length) {
this.selectedArray.unshift(this.all.value);
} else if (val.includes(this.all.value) && (val.length - 1) < this.cities.length) {
this.selectedArray = this.selectedArray.filter((item) => {
return item != this.all.value;
})
}
},
search(){
this.cities = this.cities.filter(item => item.label.indexOf(this.selectParam) > -1);
}
}
}
// 创建Vue实例,得到 ViewModel const:常量 let:变量 var:不建议使用
const app = new Vue({
el: '#app', // 用于挂载需要vue管理的元素
data: {}, //定义数据
methods: {}, // 定义函数
components: {
cpn
}
});
</script>
- css部分
<style>
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
content: ''
}
</style>