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)
目录
相关文章
|
JavaScript 数据安全/隐私保护
vue3+element-plus权限控制实现(el-tree父子级不关联情况处理)
后台管理系统常见的权限控制需求,这里讲button实现交互细节处理, 取消选中子级menu/button,父级不关联取消; 选中/取消父级catalog/menu,子级全部选中/取消; 选中/取消部分子级menu/button,父级关联半选中状态(indeterminate=true);
747 2
|
JSON JavaScript 前端开发
vue如何获取Elementui Tree 树形控件当前选中的节点
vue如何获取Elementui Tree 树形控件当前选中的节点
350 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10200 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
存储
el-tree 动态指定默认选中节点
el-tree 动态指定默认选中节点
1168 6
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
5159 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
JavaScript
vue3使用element-plus 树组件(el-tree)数据回显
vue3使用element-plus 树组件(el-tree)数据回显
1240 0
|
前端开发 虚拟化
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
这篇文章分享了作者使用ElementPlus的虚拟化树形控件`el-tree-v2`的心得,展示了其基本用法和如何通过自定义模板来增强树节点的交互性。
4251 1
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
3899 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
|
Java
Java后台返回树形结构的二种方式
Java后台返回树形结构的二种方式
888 0
|
前端开发 JavaScript 开发者
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
在前端开发中,为解决ElementUI缺少处理树状数据选择的Select组件问题,封装了一个Vue子组件`SelectTree`。组件支持单选和多选,具备搜索功能和懒加载特性。单选示例展示了如何展示树状部门数据,而多选则增加了已选内容的取消功能。此外,还新增了根据等级限制选择的功能。文章提供了详细的代码实现和效果截图,对需要此类组件的开发者具有参考价值。
1041 1
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>

热门文章

最新文章