element 级联组件(第一级单选,数据为当前选择的整条对象节点)

注意:如果组件互相影响的情况下,数据chirlden不能为[] (空数组),否则不回显

			<el-cascader
                class="cascader filter-item"
                    ref="cascader"
                    v-model="casVals"
                    :options="scene_condition"
                    :props="{ value:'index_alias', label:'name',multiple: true}"
                    :collapse-tags="false"
                    clearable
                    @change="handleChange"
                ></el-cascader>
data(){
	return{
		casVals: [],
		scene_condition:[],//组件数据
      preRootVal: 0, // 记录之前的根节点值,用来实现单选
	}
}
handleChange() {
      const firstLvVal = Array.from(new Set(this.casVals.map(cas => cas[0])))
      let newRootVal = firstLvVal[0]
      // 控制第一级单选
      if (firstLvVal.length > 1) { // 大于1说明选了新的根节点
        newRootVal = firstLvVal.filter((val) => val !== this.preRootVal)[0]
      }
      this.casVals = this.casVals.map(val => {
        if (val[0] === newRootVal) return val 
      })
      this.preRootVal = newRootVal

      // 处理后端需要的数据
      this.$nextTick(() => {
        const checkedNodes = this.$refs['cascader'].getCheckedNodes() // 获取已选节点对象
        const finalNodes = checkedNodes.filter(node => {
            // 过滤父节点已选的
            if (!(node.parent && node.parent.checked))  return node 
          }
        )
        const finalArr = []
        const dataInfo = {}
        finalNodes.forEach(node => {
          const path = node.path
          const pathLabels = node.pathLabels
          const obj = {}
          let cur = obj
          for (let i = 0; i < path.length; i++) {
            cur.index_alias = path[i].split("|")[0]
            cur.name = pathLabels[i]
            cur.is_org=path[i].split("|")[1]
            cur.id=path[i].split("|")[2]
            cur.is_subordinate=path[i].split('|')[3]
            cur.pid=path[i].split('|')[4]
            cur.mid=path[i].split('|')[4]
            if (i + 1 < path.length) {
              cur.children = {}
              cur = cur.children
            }
          }
          finalArr.push(obj)
        })
         console.log(finalArr,'数组里有多个已选中的对象(一直找到根节点)') 
        finalArr.forEach((item, index) => {
        const { index_alias,name } = item
        if (!dataInfo[index_alias]) {
          dataInfo[index_alias] = {
            index_alias,
            children: [],
            name,
            // ......
            // 如果还需要其他参数加进去
          }
        }
        dataInfo[index_alias].children.push(item.children)
      })
		 const list = Object.values(dataInfo) // list 转换成功的数据
		 console.log(list[0]) 
      })
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值