【笔记】element-ui tree 设置成单选,并且父级不可选
侧边栏壁纸
博主昵称
沐邺清风

Nothing is impossible for a willing heart

  • 累计撰写 88 篇文章
  • 累计收到 268 条评论

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

huhuan
2022-03-28 / 0 评论 / 311 阅读 / 未收录,提交收录

HTML

<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>

JS

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
    }
  },
  methods:{
    //节点选择状态发生改变时
    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; //树形权限回显
      });
    }
  }
0

海报

正在生成.....

评论 (0)

OωO
  • ::(呵呵)
  • ::(哈哈)
  • ::(吐舌)
  • ::(太开心)
  • ::(笑眼)
  • ::(花心)
  • ::(小乖)
  • ::(乖)
  • ::(捂嘴笑)
  • ::(滑稽)
  • ::(你懂的)
  • ::(不高兴)
  • ::(怒)
  • ::(汗)
  • ::(黑线)
  • ::(泪)
  • ::(真棒)
  • ::(喷)
  • ::(惊哭)
  • ::(阴险)
  • ::(鄙视)
  • ::(酷)
  • ::(啊)
  • ::(狂汗)
  • ::(what)
  • ::(疑问)
  • ::(酸爽)
  • ::(呀咩爹)
  • ::(委屈)
  • ::(惊讶)
  • ::(睡觉)
  • ::(笑尿)
  • ::(挖鼻)
  • ::(吐)
  • ::(犀利)
  • ::(小红脸)
  • ::(懒得理)
  • ::(勉强)
  • ::(爱心)
  • ::(心碎)
  • ::(玫瑰)
  • ::(礼物)
  • ::(彩虹)
  • ::(太阳)
  • ::(星星月亮)
  • ::(钱币)
  • ::(茶杯)
  • ::(蛋糕)
  • ::(大拇指)
  • ::(胜利)
  • ::(haha)
  • ::(OK)
  • ::(沙发)
  • ::(手纸)
  • ::(香蕉)
  • ::(便便)
  • ::(药丸)
  • ::(红领巾)
  • ::(蜡烛)
  • ::(音乐)
  • ::(灯泡)
  • ::(开心)
  • ::(钱)
  • ::(咦)
  • ::(呼)
  • ::(冷)
  • ::(生气)
  • ::(弱)
  • ::(狗头)
泡泡
阿鲁
颜文字
语录
取消