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

最新推荐文章于 2024-08-14 10:04:16 发布

一只小脑斧_

最新推荐文章于 2024-08-14 10:04:16 发布

阅读量1.9k

点赞数

分类专栏：方法的封装文章标签：前端 javascript

本文链接：https://blog.csdn.net/sweet_dong/article/details/125659221

版权

方法的封装专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue.js应用中使用A-Tag组件实现级联选择器（Cascader）的功能，特别是在叶子节点全选时隐藏子节点value的处理。通过`treeToArr`函数，可以将选中的树形结构数据平铺并只显示完整的上下级路径。在`changeResourceName`方法中，当资源名称改变时，更新并输出包含完整路径的数据。这有助于在前端展示用户选择的资源信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据初始状态：叶子节点为全选状态时，不展示子节点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)
}