1 创建一个js,过滤树形数组,包含children的选项均禁用
export const filterTreeData = (treeData) => {
return treeData.filter(item => {
if (isNotEmpty(item.children)) {
item.disabled = true;
item.children = filterTreeData(item.children)
}
return item
})
}
const isNotEmpty = (arr) => {
return arr && Array.isArray(arr) && arr.length > 0;
}
2 在页面上使用
<template>
<el-tree
class="filter-tree"
:data="treeData"
:props="defaultProps"
@check="checkChange"
node-key="name"
accordion
check-strictly
highlight-current
show-checkbox
:auto-expand-parent = "true"
:default-expanded-keys="defaultArr"
:default-checked-keys="defaultArr"
ref="tree">
</el-tree>
</template>
<script>
import {filterTreeData} from '../../../plugins/dealTree';//处理只能选择最后一个节点
data() {
return {
treeData:[],
defaultProps: {
children: 'children',
label: 'name'
},//过滤使用字段
defaultArr:[]
}
}
methods: {
refreshTree() {
const vm = this;
vm.treeData = [...vm.treeData];
},
// //获取数据
async getRuleData(){
let ruleData = [] //获取非树型格式的数据
this.treeData = this.listToTreeLoop(ruleData)
filterTreeData(this.treeData);
},
/** 控制树形单选 */
checkChange(data, checked) {
if (checked) {
if (!!data.children && data.children.length>0) {
console.log("有子节点不可选")
}else{
this.checkedData = data;
this.ruleId = data._id
this.selectleveList = data;
//选中时需要回显的值可在这里操作
......
this.$refs.tree.setCheckedKeys([data.name]);
this.defaultArr=[data.name]
}
}
},
//数据组装
listToTreeLoop(data){
//数据组装为树型
},
}
</script>