实现这个需求的html,首先在element.eleme.cn/#/zh-CN/com…
<el-cascader popper-class="cascader" ref="cascader" v-model="selectChannelStatus" :options="salesChannelStatusData" :props="salesChannelStatusDataMultiple" @change="changeNode" clearable> </el-cascader>
查询到props | 配置选项multiple设置多选
salesChannelStatusDataMultiple: { multiple: true }, saveCheckData: [] // 前一次选择的数据
然后查询事件,在change事件中控制二级节点单选
发现无法明确最新选择的s是哪个节点,设置了一个存储上一次选择的数据
通过筛选,可以得到最新选择的数据。
changeNode(){
let newCheck
if (this.selectChannelStatus.length > this.saveCheckData.length) {
// 增加的二级节点数据
newCheck = this.selectChannelStatus.filter((item, i) => { return !this.saveCheckData.includes(item) })
// 如果有重复的数据
if (newCheck.length) {
// 删掉涉及重复的一级节点下的所有二级节点的数据
this.selectChannelStatus = this.selectChannelStatus.filter((item) => { return item[0] !== newCheck[0][0] })
// 新增增加的二级节点数据,也是为了解决删除数据后跳到其他的一级节点位置,保证最新增加的数据是当前的节点数据
this.selectChannelStatus.unshift(...newCheck) }
}
}
this.saveCheckData = [...this.selectChannelStatus]
}