随身笔记
随身笔记

el-tree单选且父节点不能点击

https://sdeno.com/wp-content/uploads/2021/07/singlertree1.png

 

 

<el-tree
  v-if="showTree"
  :data="date"
  show-checkbox
node-key="id"
ref="tree"
check-strictly
:highlight-current='true'
:check-on-click-node="true"
:accordion="true"
:default-checked-keys="[checkedkey]"
:default-expanded-keys="checkedkey"
:props="defaultProps"
:default-expand-all="false"
@check-change="parentModules"
@check="currentChecked"
></el-tree>

 

      date: [
        {
        moduldCode: 1,
        jgmc: '一级 2',
        disabled:true,
        children: [{
          moduldCode: 3,
          jgmc: '二级 2-1',
          disabled:true,
          children: [{
            moduldCode: 4,
            jgmc: '三级 3-1-1'
          }, {
            moduldCode: 5,
            jgmc: '三级 3-1-2',
          }]
        }, {
          moduldCode: 2,
          jgmc: '二级 2-2',
          disabled:true,
          children: [{
            moduldCode: 6,
            jgmc: '三级 3-2-1'
          }, {
            moduldCode: 7,
            jgmc: '三级 3-2-2',
          }]
        }]
       }
      ],
      checkedkey: [],
      defaultProps: {
        // children: "child",
        // label: "moduleName",
        label: "jgmc",
        // id:'moduldCode' //可要可不要
      },
      // 取uniqueValue值的时候,列:uniqueValue[0]否则会是一个数组
      uniqueValue:'',//最后拿到的唯一选择的moduldCode值,相当于id
      showTree:false

methods: {
 currentChecked (nodeObj, SelectedObj) {
   console.log(SelectedObj)
   console.log(SelectedObj.checkedKeys) // 这是选中的节点的key数组
   console.log(SelectedObj.checkedNodes) // 这是选中的节点数组
 },
  //节点选择状态发生改变时
  parentModules(data,checkbox,node){
   if(checkbox){
     // 注意:后端返回的node-key不是id,是moduldCode
    this.$refs.tree.setCheckedKeys([data.id]); //data.moduldCode 根据自己需求改,我这个是moduldCode,上面data配置中我已经修改了的
    this.uniqueValue = this.$refs.tree.getCheckedKeys().toString(); //不加上toString()会报:期望一个数字或者字符串,结果返回的是数组
   }else{
    this.uniqueValue = this.$refs.tree.getCheckedKeys().toString();
    if(this.uniqueValue.length == 0){
      this.uniqueValue = ''
    }
   }
 },

}

 

指定默认被选中项目:

checkedkey: ['id']  //

 

初始化:不展开,都不被选中

this.$nextTick(function (){
 this.checkedkey = [];
 this.showTree = true
})

 

参考:https://www.cnblogs.com/tlfe/p/11693772.html

http://hanwenblog.com/post/20.html

 

随身笔记

el-tree单选且父节点不能点击
    <el-tree v-if="showTree" :data="date" show-checkbox node-key="id" ref="tree" check-strictly :highlight-current='true' :check-on-click-node=…
扫描二维码继续阅读
2021-07-21