elementUI树形结构过滤后展示数据和多选框选择问题

最新推荐文章于 2024-01-03 13:28:18 发布

原创

最新推荐文章于 2024-01-03 13:28:18 发布 · 961 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #javascript #前端 #vue.js

这篇博客探讨了在Vue.js中使用elementUI组件库处理树形结构数据时，如何结合筛选品牌和关键字搜索实现过滤功能。同时，文章指出在过滤后，多选框选择存在不正确选取过滤数据的bug，并提供了相关的代码片段进行说明和分析。作者通过`filter-node-method`方法实现了自定义过滤，并监听`treeIptSearch`和`treeBrand`的变更来更新过滤条件。此外，还展示了如何获取选中的节点数据。

elementUI树形结构过滤后展示数据和多选框选择问题

<template>
  <div>
    <div class="flex mt14">
      <InputSelect title="品牌" :options="taskObj" class="ml20" @change="handleBrand" :val="treeBrand"/>
      <div class="fs14 ml32">搜索</div>
      <el-input placeholder="输入关键字进行过滤" v-model.trim="treeIptSearch" class="w270 ml10"></el-input>
    </div>
    <div class="mt32 pd055 tree-wrapper">
      <el-tree
        :data="treeFormData"
        show-checkbox
        node-key="id"
        ref="tree"
        highlight-current
        :expand-on-click-node="false"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @check="getCheckNape"
        :default-expanded-keys="defaultExpandedKeys"
      >
      <!-- 展开所有 default-expand-all -->
      </el-tree>
    </div>
  <