el-select嵌套el-tree子节点全选只返回父节点方案

最新推荐文章于 2025-07-13 12:26:32 发布

原创最新推荐文章于 2025-07-13 12:26:32 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

vue.js 同时被 3 个专栏收录

31 篇文章

订阅专栏

elementui

10 篇文章

订阅专栏

vue-cli

6 篇文章

订阅专栏

本文介绍了一个基于Element UI的多选组件实现案例，该组件结合了选择框与树形结构，支持用户通过输入进行搜索过滤，并提供了自定义的值变化监听及节点选择事件处理。文章详细展示了如何使用Vue.js进行组件开发，包括数据双向绑定、状态管理和事件监听等关键技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <el-select
       v-model="selectList"
       placeholder="请选择"
       multiple
       @change="selectChange">
       <el-option :value="selectValue" style="height: auto" disabled>
          <el-input
             size="mini"
             placeholder="搜索区域"
             v-model="filterText">
          </el-input>
          <el-tree
             :data="regionOptions"
             show-checkbox
             node-key="oid"
             ref="tree1111"
             highlight-current
             :props="defaultProps"
             :filter-node-method="filterNode"
             @check-change="handleCheckChange">
          </el-tree>
       </el-option>
     </el-select>
</template>
<script>
export default {
  data() {
    return {
      defaultProps: {
          label: 'thisName',
          children: 'children',
          key:'oid',
          value:'oid'
      },
      selectList: [],
      selectValue: [],
      filterText: ""
    };
  },
  mounted () {
    this.$on('change', function() {
      this.handleCheckChange()
    })
  },
  watch: {
    filterText(val) {
      this.$refs.tree1111.filter(val);
    }
  },
  methods: {
    // select框值改变时候触发的事件
    selectChange(e) {
      var arrNew = []
      var dataLength = this.selectValue.length
      var eleng = e.length
      for (let i = 0; i < dataLength; i++) {
          for (let j = 0; j < eleng; j++) {
              if (e[j] === this.selectValue[i].thisName) {
                  arrNew.push(this.selectValue[i])
              }
          }
      }
      this.$refs.tree1111.setCheckedNodes(arrNew) //设置勾选的值
    },
    // tree1111选择改变时候触发的事件
    handleCheckChange() {
      let res = this.getSimpleCheckedNodes(this.$refs.tree1111)
      let arrLabel = []
      let arr = []
      res.forEach((item) => {
          arrLabel.push(item.thisName)
          arr.push(item)
      });
      this.selectValue = arr
      this.selectList = arrLabel
    },
    // tree1111搜索
    filterNode(value, data) {
      if (!value) return true
      return data.thisName.indexOf(value) !== -1
    },
    getSimpleCheckedNodes(store) {
      const checkedNodes = [];
      const traverse = function(node) {
        const childNodes = node.root ? node.root.childNodes : node.childNodes;
        childNodes.forEach(child => {
          if (child.checked) {
            checkedNodes.push(child.data);
          }
          if (child.indeterminate) {
            traverse(child);
          }
        });
      };
      traverse(store)
      return checkedNodes;
    },
   }
}
</script>