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

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
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐