方法
treeSelect(node) {
//调用赋值
this.findPathByLeafId(this.partOptions, node.id)
},
// 递归实现,遍历数组
// 通过id遍历查找父级name
findPathByLeafId(array, id) {
const stack = []
let going = true
const walker = (array, id) => {
array.forEach(item => {
if (!going) return
stack.push(item.partialName)
if (item['id'] === id) {
going = false
} else if (item['children']) {
walker(item['children'], id)
} else {
stack.pop()
}
})
if (going) stack.pop()
}
walker(array, id)
// return stack.join(' / ')
this.partLabelName = stack.join(' / ')
},
HTML结构
<tree-select
v-model="form.partialId"
:options="partOptions"
:flat="false"
:searchable="true"
:show-count="false"
:normalizer="normalizerPart"
:multiple="false"
:disable-branch-nodes="false"
placeholder="请选择名称"
@treeSelect="treeSelect"
/>
<el-col :span="24">
<div style="margin-left: 90px;margin-bottom:5px;color: #999999">
{{ partLabelName }}
</div>
</el-col>
data() {
return {
visible: false,
// 是否显示弹出层
open: false,
// 确认按钮加载状态
loading: false,
// 表单参数
form: {},
partLabelName: ''
}
},
循环树结构
const renderTreeNodes = (data) =>
data.map((item, index) => {
if (item.children) {
return (
<TreeNode checkable={false} title={`${index + 1}、${item.title}`} key={item.key}>
{renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode key={item.key} {...item}></TreeNode>;
});
<Tree
checkable
onExpand={onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
onCheck={checkDep}
checkedKeys={checkedKeys}
selectable={false}
// onSelect={onSelect}
// selectdKeys={selectdKeys}
>
{renderTreeNodes(treeData)}
</Tree>