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

简介: 本文介绍了如何在Element UI的tree组件中获取选中的节点值以及如何进行节点的默认选中(返显)。主要通过使用`getCheckedKeys()`和`getHalfCheckedKeys()`方法来获取完全和半选中的节点,然后使用`setCheckedKeys()`方法来设置默认选中的节点。

选中获取

在这里插入图片描述

          <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)
目录
相关文章
|
10月前
|
JavaScript
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
274 0
|
10月前
easyui的tree节点的获取和选中
easyui的tree节点的获取和选中
166 0
|
JavaScript
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
1547 0
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
Element中树形控件在项目中的实际应用
这篇文章介绍了Element UI中树形控件的实际应用,包括使用目的、官网组件介绍、组合使用组件案例以及在项目中的具体实现方法和效果展示。
|
2月前
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
500 0
|
10月前
element组件里的tree树形控件的使用?
element组件里的tree树形控件的使用?
|
4月前
element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解
element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解
578 2
element plus 可选择树形组件(el-tree) 怎样一键展开/收起?实现方法详解
|
10月前
|
JSON JavaScript 前端开发
Elementui Tree 树形控件删除功能
Elementui Tree 树形控件删除功能
78 0
Elementui Tree 树形控件删除功能
|
前端开发 JavaScript
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
414 0
|
10月前
|
JSON JavaScript 前端开发
vue+Element实现Tree树形(是否默认展开所有节点属性: default-expand-all)
vue+Element实现Tree树形(是否默认展开所有节点属性: default-expand-all)
82 0