级联选择框组件el-cascader实现同一级的二级只能单选,但是一级可以多选

310 阅读1分钟

实现这个需求的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事件中控制二级节点单选

屏幕快照 2023-12-06 上午10.42.00.png 发现无法明确最新选择的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]
}