1、使用CheckBox
在el-select下拉框中增加el-checkBox选项,示例代码
<template>
<div class="test">
<el-select multiple
collapse-tags
v-model='selectedArray'
@change='changeSelect'
placeholder='请选择'>
<el-checkbox v-model="checked"
:indeterminate="isIndeterminate"
@change='selectAll'>全选
</el-checkbox>
<el-option v-for='(item, index) in options'
:key='index'
:label='item.name'
:value='item.name'></el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'Migration', data() {
return {
isIndeterminate: false,
checked: false,
selectedArray: [],
options: [
{ name: '一一', label: 'one' },
{ name: '二二', label: 'tow' },
{ name: '三三', label: 'three' },
{ name: '四四', label: 'four' },
{ name: '五五', label: 'five' }
]
};
},
methods: {
selectAll() {
this.selectedArray = [];
if (this.checked) {
this.options.map((item) => {
this.selectedArray.push(item.name);
});
this.isIndeterminate = false;
} else {
this.selectedArray = [];
this.isIndeterminate = false;
}
},
changeSelect(val) {
if (val.length === this.options.length) {
this.checked = true;
this.isIndeterminate = false;
} else if (val.length && val.length < this.options.length) {
this.checked = false;
this.isIndeterminate = true;
} else {
this.checked = false;
this.isIndeterminate = false;
}
}
}
};
</script>
<style lang="less"
scoped>
.test {
margin: 0 auto;
width: 800px;
}
</style>
2、使用el-option
在el-select下拉框中增加el-option选项,示例代码
效果图:
<!-- 迁移任务 -->
<template>
<div class="test">
<el-select multiple
collapse-tags
v-model='selectedArray'
@change='changeSelect'
placeholder='请选择'>
<el-option :class="[{'all': isIndeterminate === 'all'} , {'part':isIndeterminate === 'part'}, {'no': isIndeterminate === 'no' }]"
label="全选"
value="选项0">
</el-option>
<el-option v-for='(item, index) in options'
:key='index'
:label='item.label'
:value='item.value'></el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'Migration',
data() {
return {
isIndeterminate: false,
checked: false,
selectedArray: [],
oldSelectArray: [],
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
}
]
};
},
computed: {
allChecked() {
return this.options.length === this.selectedArray.length;
}
},
methods: {
changeSelect(val) {
let allValues = [];
for (let item of this.options) {
allValues.push(item.value);
}
allValues = ['选项0'].concat(allValues);
const oldVal = this.oldSelectArray.concat([]);
const oldInclude0 = oldVal.includes('选项0');
const newInclude0 = val.includes('选项0');
// 若是全部选择
if (newInclude0) {
this.selectedArray = allValues;
this.isIndeterminate = 'all';
}
if (oldInclude0 && !newInclude0) {
this.selectedArray = [];
this.isIndeterminate = 'no';
}
if (oldInclude0 && newInclude0) {
this.selectedArray = val;
this.selectedArray = this.selectedArray.filter(d => d !== '选项0');
this.isIndeterminate = 'part';
}
if (!oldInclude0 && !newInclude0) {
if (val.length === allValues.length - 1) {
this.selectedArray = ['选项0'].concat(val);
this.isIndeterminate = 'all';
} else if (!val.length) {
this.isIndeterminate = '';
} else {
this.isIndeterminate = 'part';
}
}
this.oldSelectArray = this.selectedArray;
}
}
};
</script>
<style lang="less"
scoped>
.test {
margin: 0 auto;
width: 800px;
}
</style>
<style>
.el-select-dropdown.is-multiple .all.selected:after {
content: "\e6da";
}
.el-select-dropdown.is-multiple .part:after {
position: absolute;
content: "\e6d8";
right: 20px;
font-family: element-icons;
font-size: 12px;
font-weight: 700;
color: #5374c0;
}
.el-select-dropdown.is-multiple .no.selected:after {
content: "''";
}
</style>