vue element select 多选全选功能

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;
 }

以下是一个使用 Vue 2 和 Element UI 实现的多选全选开源项目的示例代码: ```html <template> <div> <el-checkbox v-model="allSelected" @change="selectAll">{{selectAllText}}</el-checkbox> <br /> <el-checkbox-group v-model="selectedItems"> <el-checkbox v-for="item in items" :key="item.id" :label="item">{{item.label}}</el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { items: [ { id: 1, label: 'Item 1' }, { id: 2, label: 'Item 2' }, { id: 3, label: 'Item 3' }, { id: 4, label: 'Item 4' } ], selectedItems: [], allSelected: false } }, computed: { selectAllText() { return this.allSelected ? 'Deselect All' : 'Select All' } }, methods: { selectAll() { if (this.allSelected) { this.selectedItems = [...this.items] } else { this.selectedItems = [] } } } } </script> ``` 在该示例中,我们首先渲染一个“全选”复选框,并将其绑定到 `allSelected` 数据属性上。当用户更改复选框的选中状态时,我们会调用 `selectAll` 方法,该方法将根据 `allSelected` 数据属性将所有项目添加到或从 `selectedItems` 数组中删除。 接下来,我们使用 `el-checkbox-group` 组件渲染每个项目,并将其绑定到 `selectedItems` 数据属性上。最后,我们使用 `computed` 属性计算“全选”复选框的文本,该文本根据 `allSelected` 数据属性而变化。 这是一个基本示例,您可以根据需要进行扩展和定制。希望这可以帮助到您!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yongqiang Chen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值