• 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; //树形权限回显
      });
    }
  • 相关阅读:
    洛谷 P1941 飞扬的小鸟
    洛谷P2464 [SDOJ2008]郁闷的小J
    [cogs2314][HZOI 2015] Persistable Editor
    [vijos1067]Warcraft III 守望者的烦恼
    【vijos1049】送给圣诞夜的礼品
    [cogs347]地震
    gcc 编译多个源文件
    2_兔子产仔问题
    1_鸡兔同笼问题
    LeetCode(61) Rotate List
  • 原文地址:https://www.cnblogs.com/tlfe/p/11693772.html
Copyright © 2020-2023  润新知