element-ui tree 设置成单选,并且父级不可选

<el-tree
    :data="date"  //数据来源
    show-checkbox //节点是否可被选择
    node-key="moduldCode" //每个树节点用来作为唯一标识的属性,整棵树应该是唯一的
    ref="tree"
    check-strictly //在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false
    :highlight-current='true' //是否高亮当前选中节点,默认值是 false。
    :check-on-click-node="true" //是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。
    :accordion="true" //是否每次只打开一个同级树节点展开
    :default-checked-keys="[checkedkey]" //默认勾选的节点
    :default-expanded-keys="checkedkey" //默认展开的节点
    :props="defaultProps" //配置选项
    :default-expand-all="true" //是否默认展开所有节点
    @check-change="parentModules" //节点选中状态发生变化时的回调
  ></el-tree>
data() {
    return {
      date: [{
          moduldCode: 1,
          moduleName: '一级 2',
          disabled:true,
          child: [{
            moduldCode: 3,
            moduleName: '二级 2-1',
            disabled:true,
            child: [{
              moduldCode: 4,
              moduleName: '三级 3-1-1'
            }, {
              moduldCode: 5,
              moduleName: '三级 3-1-2',
            }]
          }, {
            moduldCode: 2,
            moduleName: '二级 2-2',
            disabled:true,
            child: [{
              moduldCode: 6,
              moduleName: '三级 3-2-1'
            }, {
              moduldCode: 7,
              moduleName: '三级 3-2-2',
            }]
          }]
        }],
      checkedkey: [],
      defaultProps: {
        children: "child",
        label: "moduleName",
        id:'moduldCode' //可要可不要
      },
      // 取uniqueValue值的时候,列:uniqueValue[0]否则会是一个数组
      uniqueValue:''//最后拿到的唯一选择的moduldCode值,相当于id
    }
  },

 

//节点选择状态发生改变时
    parentModules(data,checkbox,node){
      if(checkbox){
        // 后端返回的node-key不是id,是moduldCode
        this.$refs.tree.setCheckedKeys([data.moduldCode]);
        this.uniqueValue =  this.$refs.tree.getCheckedKeys();
      }else{
        this.uniqueValue =  this.$refs.tree.getCheckedKeys();
        if(this.uniqueValue.length == 0){
          this.uniqueValue = ''
        }
      }
    },

回显

modification() {
  this.$axios.post("/admin/module/detail", {obj}).then(res => {
      this.checkedkey[0] = res.date.moduleCode; //树形权限回显
  });
}
原文地址:https://www.cnblogs.com/tlfe/p/11693772.html