element中tree组件的选中获取和返显

选中获取

在这里插入图片描述

          <el-form-item label="菜单权限" prop="menuIds">
            <el-tree
              :data="menuIdsData"
              :check-strictly="menuIdstrictly"
              show-checkbox
              node-key="id"
              ref="menuIdstree"
              accordion
              :props="{
    
    
                children: 'children',
                label: 'title',
              }"
            >
            </el-tree>
          </el-form-item>
          <el-form-item label="地市权限" prop="cityIds">
            <el-tree
              :data="cityIdsData"
              show-checkbox
              :check-strictly="cityIdstrictly"
              node-key="aid"
              ref="cityIdstree"
              accordion
              :props="{
    
    
                children: 'children',
                label: 'title',
                id: 'aid',
              }"
            >
            </el-tree>
          </el-form-item>
          <el-form-item label="按钮权限" prop="btnIds">
            <el-tree
              :data="btnIdsData"
              show-checkbox
              :check-strictly="btnIdstrictly"
              node-key="btnId"
              ref="btnIdstree"
              accordion
              :props="{
    
    
                children: 'children',
                label: 'title',
                id: 'btnId',
              }"
            >
            </el-tree>
          </el-form-item>

获取值:

     // 菜单权限
      this.ruleForm.menuIds = this.$refs.menuIdstree
        .getCheckedKeys()
        .concat(this.$refs.menuIdstree.getHalfCheckedKeys());
      // 地市权限
      this.ruleForm.cityIds = this.$refs.cityIdstree
        .getCheckedKeys()
        .concat(this.$refs.cityIdstree.getHalfCheckedKeys());
      // 按钮权限
      this.ruleForm.btnIds = this.$refs.btnIdstree
        .getCheckedKeys()
        .concat(this.$refs.btnIdstree.getHalfCheckedKeys());

取值:

this.$refs.refName.getCheckedKeys().concat(this.$refs.refName.getHalfCheckedKeys());

返显:

    if (this.$route.query.role && this.$route.query.role.id) {
    
    
      // 修改
      // this.ruleForm = this.$route.query;
      const {
    
    
        role: {
    
     roleAlias, roleStr, id },
        btnList,
        areaInfoList,
        menuList,
      } = this.$route.query;
      this.ruleForm.roleAlias = roleAlias;
      this.ruleForm.roleStr = roleStr;
      this.ruleForm.id = id;

      setTimeout(() => {
    
    
        try {
    
    
          this.menuIdsDefault = menuList.map((i) => i.id);
          this.cityIdsDefault = areaInfoList.map((i) => i.aid);
          this.btnIdsDefault = btnList.map((i) => i.btnId);
          this.$refs.menuIdstree.setCheckedKeys(this.menuIdsDefault);
          this.$refs.cityIdstree.setCheckedKeys(this.cityIdsDefault);
          this.$refs.btnIdstree.setCheckedKeys(this.btnIdsDefault);
        } catch (err) {
    
    
          this.menuIdsDefault = [];
          this.cityIdsDefault = [];
          this.btnIdsDefault = [];
        }
      }, 100);
    }

赋值:

this.$refs.refName.setCheckedKeys(Array)

猜你喜欢

转载自blog.csdn.net/qq_43291759/article/details/125968253