No estado de seleção múltipla do seletor em cascata antd, associe os dados do subitem

O estado padrão do seletor em cascata: ao selecionar todos, o valor do nó filho não será exibido.

Após o processamento dos dados: exibição completa dos dados selecionados


          <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
}

Guess you like

Origin blog.csdn.net/zq18877149886/article/details/130141654