处理antd联级选择器多选状态下数据格式

数据初始状态：叶子节点为全选状态时，不展示子节点value

处理后：完整展示所选数据

 

方法：

 <a-form-item label="资源名称" class="col-4">
        <a-cascader
          v-model:value="searchForm.filter_list"
          style="width: 100%"
          multiple
          max-tag-count="responsive"
          :options="resourceOption"
          :field-names="{ label: 'name', value: 'name', children: 'children' }"
          :get-container="getBodyContainer"
          :show-search="{ filter }"
          placeholder="请搜索或选择资源"
          @change="changeResourceName"
        ></a-cascader>
      </a-form-item>

 

const resourceNameArr = ref<any>([])
// 树形结构平铺，且仅获取有完整上下级节点的，譬如【s级，web端，资源1】
const treeToArr = (_tree: any[], _parent: CascaderProps['options'] = []) => {
  _tree.forEach((item) => {
    if (!item.children) {
      resourceNameArr.value.push(_parent.concat(item.name))
    } else {
      treeToArr(item.children, _parent.concat(item.name))
    }
  })
}

const changeResourceName = (value: string[], selectedOptions: Record<string, any>[]) => {
  resourceNameArr.value = []
  selectedOptions.forEach((item: any) => {
    const _parent = item.map((item: any) => item.name)
    _parent.pop()
    treeToArr([item[item.length - 1]], _parent)
  })
  console.log(resourceNameArr.value)
}