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

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐