el-option实现全选多选
时间: 2024-04-04 15:25:37 浏览: 64
el-select 下拉框多选实现全选的实现
el-option是el-select下拉框中的选项组件,要实现el-option的全选多选功能,需要在el-select中设置multiple属性为true,然后在el-select中使用v-model绑定一个数组,用来存储选中的选项的值。接着,在el-select中使用slot插槽,自定义下拉框的内容,将一个全选的选项放在第一位,并给它绑定一个点击事件,在点击事件中将所有的选项的值都添加到v-model绑定的数组中,即可实现el-option的全选多选功能。
例如:
```
<el-select v-model="selectedOptions" multiple>
<el-option @click="selectAllOptions" :label="'全选'"></el-option>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
{ label: '选项4', value: 'option4' }
],
selectedOptions: []
}
},
methods: {
selectAllOptions() {
this.selectedOptions = this.options.map(option => option.value)
}
}
}
</script>
```
阅读全文