vue antd2 treeSelect多选自定义展示内容（父级名称+子级名称），当子级全部选中时只展示父级的名称，并且只获取子级的id

最新推荐文章于 2024-09-13 17:57:32 发布

suimengfeiyang123

最新推荐文章于 2024-09-13 17:57:32 发布

阅读量525

点赞数 2

文章标签： vue.js 前端 javascript 前端框架 anti-design-vue

本文链接：https://blog.csdn.net/suimengfeiyang123/article/details/140827002

版权

               <a-tree-select
                v-model="treeValue"
                style="width: 400px;"
                :tree-data="deptTree"
                allow-clear
                maxTagCount="3"
                @change ="handleChange"
                :showCheckedStrategy="SHOW_PARENT"
                multiple
                tree-checkable 
                :labelInValue="true" 
            >

SHOW_PARENT 选择父级展示父节点而不是全部，antd2 必须这么引入

import { TreeSelect } from 'ant-design-vue'

const SHOW_PARENT = TreeSelect.SHOW_PARENT

label-in-value改变value结构从[id],[{value:xxx,label:"xxx"}]

change函数修改label

//处理lable
     handleChange(value, label, extra) {
        this.formSearchu.area = [];
        value?.map((item) => {
          extra.allCheckedNodes?.map((item1) => {
            if (item.value === item1.node.data.props.value) {
              if(item1.node.data.props.level==3||item1.node.data.props.level==5){
                item.label = item1.node.data.props.parentName.trim()+'-'+item1.node.data.props.label;
              }
               if(item1.children){
                    this.getSelectAllId(item1.children)
               }else{
                   this.formSearchu.area.push(item1.node.key)
               }
              
            }
          });
        });
    },
   //递归查询获取子级id
    getSelectAllId(arr,type=0) {
        if(arr.length>0){
             arr.map(item=>{
                 if(item.children){
                    this.getSelectAllId(item.children,type)
                 }else{
                    if(type==1){
                        this.formSearchu.eqTypeIds.push(item.node.key)
                    }else{
                        this.formSearchu.area.push(item.node.key)
                    }
                 }
             })
        }
    },

树形结构处理，添加层级

export const buildTreeLabel = (list, arr = [], parentId = 0,parentName,level = 0) => {
    list.forEach(item => {
      if (item.parentId == parentId) {
        var child = {
          key: item.id,
          value: item.id + '',
          label: item.name,
          name: item.name,
          type: item.type,
          projectId: item.projectId,
          parentName:parentName,
          children: [],
          colData: item,
          scopedSlots: { icon: 'custom', },
          ...item,
          level:level
        }
        buildTreeLabel(list, child.children, item.id,item.name,parseInt(child.level)+parseInt(1))
        if (child.children.length === 0) {
          child['is-leaf'] = true
       
        }
        arr.push(child)
      }
    })
  }