vue antd2 treeSelect多选自定义展示内容(父级名称+子级名称),当子级全部选中时只展示父级的名称,并且只获取子级的id
label-in-value改变value结构从[id],[{value:xxx,label:"xxx"}]SHOW_PARENT 选择父级展示父节点而不是全部,antd2 必须这么引入。change函数修改label。树形结构处理,添加层级。
·

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



所有评论(0)