antd联级选择器多选状态下,关联子项数据

级联选择器默认状态:当进行全选的时候,是不会展示子节点value

经过数据处理后:完整展示所选数据


          <a-cascader
            v-model:value="modelRef.executors"
            placeholder="请选择生效部门或执行人"
            :options="departments"
            dropdownClassName="permission-container"
            :dropdownMatchSelectWidth="true"
            :getPopupContainer="getPopupContainer"
            :notFoundContent="'暂无数据'"
            multiple
            :field-names="{
              label: 'label',
              value: 'value_type',
              children: 'children',
            }"
            :show-search="{ filter }"
            expand-trigger="hover"
            change-on-select
            @change="changeResourceName"
            allow-clear
            :open="true"
          ></a-cascader>

const selectData = ref<any>([])
// (注意)树形结构平铺,且仅获取有完整上下级节点的,没有下级的需要提前disabled 掉,否则会出现意想不到的bug 
// 利用递归循环,组合数据结构,最终是一个二维数组
const treeToArr = (_tree: any[], _parent: any['options'] = []) => {
  _tree.forEach((item) => {
    if (!item.children) {
        // value_type 就是你要级联选择器上绑定的 value 键
      selectData.value.push(_parent.concat(item.value_type))
    } else {
      treeToArr(item.children, _parent.concat(item.value_type))
    }
  })
}

const changeResourceName = (
  value: string[],
  selectedOptions: Record<string, any>[],
) => {
  selectData.value = []
  selectedOptions.forEach((item: any) => {
    const _parent = item.map((item: any) => item.value_type)
    // 删除最后一项
    _parent.pop()
    // item[item.length - 1] 传入最后一项,也就是最后选择的那一项
    treeToArr([item[item.length - 1]], _parent)
  })
 // 最终的赋值
  modelRef.executors = selectData.value
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

清云随笔

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

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

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

打赏作者

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

抵扣说明:

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

余额充值