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; //樹形權限回顯
　　});
}