el-tree 单选

125 阅读1分钟

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>