el-tree 单选

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>


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容