vue element select 多选全选功能

最新推荐文章于 2025-09-04 12:14:05 发布

原创最新推荐文章于 2025-09-04 12:14:05 发布 · 887 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #html

学习篇专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个Vue.js组件，用于创建一个可清空、多选的下拉选择框。组件使用el-select和el-option元素，并在变更时通过selectAll方法处理全选和取消全选的逻辑。数据部分包括新值productLineIds和旧值oldProductLineIds，以及一个包含多个选项的对象数组productLineOption。js部分展示了如何监听change事件并根据用户的选择更新productLineIds，确保正确处理全选和取消全选的情况。

1、html部分

<el-select v-model="productLineIds" placeholder="请选择品线" size="small" clearable multiple collapse-tags @change="selectAll" >
      <el-option v-for="item in productLineOption" :label="item.name" :value="item.id" :key="item.id"></el-option>
</el-select>

2、data数据部分

productLineIds:[],//新值
oldproductLineIds:[],//旧值
productLineOption:[
{"id":74,"accountId":1,"name":"6111","parentId":61,"parentName":"61"},{"id":75,"accountId":1,"name":"6112","parentId":61,"parentName":"61"},{"id":76,"accountId":1,"name":"6113","parentId":61,"parentName":"61"},{"id":77,"accountId":1,"name":"6121","parentId":61,"parentName":"61"},{"id":78,"accountId":1,"name":"6122","parentId":61,"parentName":"61"},{"id":79,"accountId":1,"name":"6131","parentId":61,"parentName":"61"},{"id":80,"accountId":1,"name":"6132","parentId":61,"parentName":"61"}
],

3、js部分

selectAll (val) {
            const allValues = this.productLineOption.map(item => {
                return item.id;
            });
            // 用来储存上一次选择的值，可进行对比
            const oldVal = this.oldproductLineIds.length > 0 ? this.oldproductLineIds : [];
        
            // 若选择全部
            if (val.includes('all')) {
                this.productLineIds = allValues;
            }
        
            // 取消全部选中， 上次有， 当前没有， 表示取消全选
            if (oldVal.includes('all') && !val.includes('all')) {
                this.productLineIds = [];
            }
        
            // 点击非全部选中，需要排除全部选中 以及 当前点击的选项
            // 新老数据都有全部选中
            if (oldVal.includes('all') && val.includes('all')) {
                const index = val.indexOf('all');
                val.splice(index, 1); // 排除全选选项
                this.productLineIds = val;
            }
        
            // 全选未选，但是其他选项都全部选上了，则全选选上
            if (!oldVal.includes('all') && !val.includes('all')) {
                if (val.length === allValues.length - 1) {
                this.productLineIds = ['all'].concat(val);
                }
            }
        
            // 储存当前选择的最后结果 作为下次的老数据
            this.oldproductLineIds = this.productLineIds;
 }