element的select和tree树形组件组合

最新推荐文章于 2024-09-13 17:57:32 发布

在线小白www

最新推荐文章于 2024-09-13 17:57:32 发布

阅读量1.8k

点赞数 2

分类专栏： elementUI Vue

本文链接：https://blog.csdn.net/qq_43654065/article/details/116529063

版权

Vue 同时被 2 个专栏收录

48 篇文章 2 订阅

订阅专栏

elementUI

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中使用el-select和el-tree组件实现多级选择的联动，并展示了如何通过监听节点勾选变化来同步数据状态。重点讲解了`v-model`绑定和`@check-change`事件的使用。

摘要由CSDN通过智能技术生成

效果
在这里插入图片描述

<body>
  <div id="app">
    <el-select v-model="mineStatus" placeholder="请选择" multiple @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>

  </div>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        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: {
        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 = [];
          console.log(res)
          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>
</body>