el-table多选表格,勾选互斥选项功能实现

el-table多选表格,勾选互斥选项功能实现_第1张图片
vue后台项目开发需求,要求勾选通道选项时,短信与彩信勾选为互斥关系(即勾选了短信,再勾选才彩信时,短信默认取消选中状态),其他选项可正常多选。

html:

<el-table
    border
    ref="multipleTable"
    size="mini"
    :data="allData.getDataDicUsing.channelList.channelTree"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="changeSelectedChannels">
    <el-table-column
      type="selection"
      width="50">
    </el-table-column>
    <el-table-column
      prop="channelName"
      label="通道名称">
    </el-table-column>
</el-table>

思路:
1 多选表头已经勾选的项 channelList 是个数组,
2 从数组中先判断这俩互斥项是否同时存在,存在的话,缓存这俩互斥项在数组中的索引值,
3 把这俩索引值进行比较,索引值较大的那个说明是后选的,那么从数组中删除掉索引值小的那项(先选的),然后在删除前再把勾选的那个样式去掉就行了

methods:

			changeSelectedChannels(channelList) {
                let smsIndex, mmsIndex;
                if (channelList.length) {
                    // 短信索引值
                    smsIndex = channelList.findIndex(val => {
                        return (val.typeOne === 1);
                    });
                    // 彩信索引值
                    mmsIndex = channelList.findIndex(val => {
                        return (val.typeOne === 5);
                    });
                }

                if (typeof (smsIndex) !== "undefined" && typeof (mmsIndex) !== "undefined") {
                    // 彩信与短信同时存在
                    if (smsIndex !== -1 && mmsIndex !== -1) {
                        // 彩信后选, 删除短信
                        if (mmsIndex > smsIndex) {
                            this.$refs.multipleTable.toggleRowSelection(channelList[smsIndex], false);
                            channelList.splice(smsIndex, 1);
                            this.toggleSelectedChannels(channelList);
                        }else {
                            // 短信后选, 删除彩信
                            this.$refs.multipleTable.toggleRowSelection(channelList[mmsIndex], false);
                            channelList.splice(mmsIndex, 1);
                            this.toggleSelectedChannels(channelList);
                        }
                    }
                }
              },
              toggleSelectedChannels(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, true);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

你可能感兴趣的:(el-table多选互斥,多选表格互斥选项,选项互斥功能,el-table)