zoukankan      html  css  js  c++  java
  • 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; //树形权限回显
      });
    }
  • 相关阅读:
    MVC--全选反选
    文件上传(表单,Ajax)、文件下载
    Java的一些细节语法(不定时更新。。。)
    并发基础知识
    Linux基本命令操作
    Linux基本操作和自己动手组装服务器
    VMware虚拟机和CentOS系统的安装过程
    安装操作系统
    中间件介绍
    wifi破解
  • 原文地址:https://www.cnblogs.com/tlfe/p/11693772.html
Copyright © 2011-2022 走看看