element UI 树形数据只能选择最后一级 只能单选 树形单选树形检索

直接上代码，如有疑问，欢迎交流

template里面

<el-tree
	class="filter-tree"
	:data="treeData"// 树形data数据，具体按照官方文档格式
	:props="defaultProps" //自定义props配置，如严格按照官方格式无需添加此项，
	@check="checkChange" //checkbox 选项变化事件
	node-key="id" //勾选时按照哪个值显示，必须是唯一的值
	accordion 
	check-strictly
	highlight-current
	show-checkbox 
	:default-expanded-keys="defaultArr"
	:default-checked-keys="defaultArr"
	:filter-node-method="filterNode"
	ref="tree">
</el-tree>

script

<script>
import ArrayUtils from "../../../../libs/utils/ArrayUtils";//处理只能选择最后一个节点


export default {
    name: "tree-dialog",
    data() {
        return {
            filterText: '',//检索字段
            defaultProps: {
                children: 'children',
                label: 'name'
            },//过滤使用字段
            treeData: [],//资产大类树形结构数据
            checkedData: {},//当前点击的数据
        }
    },
    watch:{
        /** 监听检索字段变化 */
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
    mounted(){
    	//获取到treeData后 此处已省略请求数据过程，请自行添加  处理只能选择最后一个节点
        ArrayUtils.filterTreeData(this.treeData);
    },
    methods: {
        /** 控制树形单选 */
        checkChange(data, checked) {
            if (checked) {
                if (!!data.children && data.children.length>0) {
                    console.log("有子节点不可选")
                }else{
                    this.checkedData = data;
                    // 注意！！！
                    //1、下方的id和属性中 node-key="id"必须是同一个字段  
                    //2、$refs.tree 也需要和上方的属性匹配 ref="tree"
                    this.$refs.tree.setCheckedKeys([data.id]);
                }
            }
            console.log("checked data",data,this.checkedData)
        },
        /** 树形数据检索 */
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
    },
}
</script>

处理只能选择最后一个节点 ArrayUtils 中的数据

/** 过滤树形数组，包含children的选项均禁用 */
function filterTreeData(treeData) {
	return treeData.filter(item => {
		if (isNotEmpty(item.children)) {
			item.disabled = true;
			item.children = filterTreeData(item.children)
		}
		return item
	})
}
function isNotEmpty(arr) {
  return arr && Array.isArray(arr) && arr.length > 0;
}
export default {
	filterTreeData
}