element-ui 中el-select 嵌套 tree树形控件

一时失言乱红尘 2022-11-21 01:12 266阅读 0赞

### element-ui 中el-select 嵌套 tree树形控件 ###

*  用select，嵌套tree控件
 *   *  js部分

\*\*

> 本文转载https://blog.csdn.net/weixin\_45140661/article/details/90898558

\*\*

# 用select，嵌套tree控件 #

<el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags @change="selectChange">
          <el-option  :value="mineStatusValue" style="height: auto">//option展开高度太小，把height设置为auto就好啦
           	<el-tree :data="data" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange"></el-tree>
    	  </el-option>
      </el-select>

## js部分 ##

<script>
    export default { 
      data() { 
        return { 
          mineStatus: "",
          mineStatusValue: [],
          data: [
            { 
              id: 1,
              label: "一级 1",
              children: [
                { 
                  id: 4,
                  label: "二级 1-1"
                }
              ]
            },
            { 
              id: 2,
              label: "一级 2",
              children: [
                { 
                  id: 5,
                  label: "二级 2-1"
                },
                { 
                  id: 6,
                  label: "二级 2-2"
                }
              ]
            },
            { 
              id: 3,
              label: "一级 3",
              children: [
                { 
                  id: 7,
                  label: "二级 3-1"
                },
                { 
                  id: 8,
                  label: "二级 3-2"
                }
              ]
            }
          ],
          defaultProps: { 
            children: "children",
            label: "label"
          }
        };
      },
      methods: { 
    //select框值改变时候触发的事件
    selectChange(e){ 
    	  var arrNew = [];
          var dataLength = this.mineStatusValue.length;
          var eleng = e.length;
          for(let i = 0; i< dataLength ;i++){ 
            for(let j = 0; j < eleng; j++){ 
              if(e[j] === this.mineStatusValue[i].label){ 
                arrNew.push(this.mineStatusValue[i])
              }
            }
          }
          this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
    },
     handleCheckChange() { 
          let res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
          let arrLabel = [];
          let arr = [];
          res.forEach(item => { 
            arrLabel.push(item.label);
            arr.push(item);
          });
          this.mineStatusValue = arr;
          this.mineStatus = arrLabel;
          console.log('arr:'+JSON.stringify(arr))
          console.log('arrLabel:'+arrLabel)
        }
      }
    };
    </script>>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQ4NTkw_size_16_color_FFFFFF_t_70_pic_center]  
如果出现这个问题，是因为select中没有加入 multiple collapse-tags这两个select属性  
，不能多选导致报错，这个我还折腾了挺久的  
好啦，这样基本上就完成啦  
![在这里插入图片描述][2020102913194495.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQ4NTkw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/49eeb7233f54480190ce14475a11cc40.png
[2020102913194495.png_pic_center]: https://img-blog.csdnimg.cn/2020102913194495.png#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，266人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementui Tree 树形控件增删改查

前端代码 axios.js import axios from 'axios'; import Qs from 'qs'; import {Mes

我会带着你远行/ 2022年12月31日 10:20/ 0 赞/ 637 阅读

相关 element-ui 中el-select 嵌套 tree树形控件

element-ui 中el-select 嵌套 tree树形控件用select，嵌套tree控件 js部分 \\ > 本文转载https:

一时失言乱红尘/ 2022年11月21日 01:12/ 0 赞/ 267 阅读

相关 ElementUI el-tree 树形控件给节点添加图标

[Avue][] 这个基于Element的二次封装可以看看 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

淩亂°似流年/ 2022年10月18日 01:29/ 0 赞/ 783 阅读

相关 vue获取Elementui Tree 树形控件当前选中的节点

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成

快来打我*/ 2022年09月05日 04:09/ 0 赞/ 412 阅读

相关 Elementui Tree 树形控件删除子节点

要求： Elementui Tree 树形控件，将勾选选中的值放在list集合里面提交 ![1e20943742fb7842dc9120b9bacc002f.png][]

╰半夏微凉°/ 2022年09月05日 04:09/ 0 赞/ 539 阅读

相关 Elementui Tree 树形控件删除功能

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成

深藏阁楼爱情的钟/ 2022年09月02日 08:11/ 0 赞/ 378 阅读

相关 Elementui Tree 树形控件删除子节点

要求： Elementui Tree 树形控件，将勾选选中的值放在list集合里面提交 ![59232a3edf3fe14045582f9e5e1fd58a.png][]

分手后的思念是犯贱/ 2022年09月02日 00:51/ 0 赞/ 309 阅读

相关 Elementui Tree 树形控件删除功能

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成

客官°小女子只卖身不卖艺/ 2022年09月01日 13:51/ 0 赞/ 388 阅读

相关 ElementUI Tree 树形控件

一、概述用清晰的层级结构展示信息，可展开或折叠。官方网站：[https://element.eleme.cn/\/zh-CN/component/tree][htt

矫情吗；*/ 2022年08月28日 13:53/ 0 赞/ 297 阅读

相关 elementui tree树形控件单选问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56

今天药忘吃喽~/ 2022年01月15日 01:25/ 0 赞/ 988 阅读