el-table 树状表格查询符合条件的数据

需要对el-table的树状表格根据输入机构名称,筛选出符合条件的数据,可用如下方法:

页面内容如下: 

<el-input v-model="ogeName" placeholder="请输入机构名称">

<el-table :data="list" row-key="id" :tree-props="{children:'children',hasChildren:'hasChildren'">
    <el-table-column label="机构名称" prop="attributes.org_name"></el-table-column>
</el-table>

数据格式如下:

   data() {
      return {
        data: [{
          attributes:[org_name:'1'],
          hasChildren: true,
          label: '一级 1',
          children: [{
            attributes:[org_name:'1'],
            hasChildren: true,
            label: '二级 1-1',
            children: [{
              attributes:[org_name:'1'],
              hasChildren: false,
              label: '三级 1-1-1'
            }]
          }]
        }],
      };
    },

具体筛选方法如下:

// 查询
handleSearch() {
    let list = this.list
    let lastList = this.handleTreeData(list,this.orgName)
    this.list = lastList
}
// 筛选数据
handleTreeData(treeData,filterValue) {
    if (!treeData || treeData.length !== 0) {
        return []
    }
    const data = []
    for (let i = 0; i < treeData.length; i++) {
        let match = false
        for (const pro in treeDate[i]) {
            if (pro === 'label') {
                match |= treeData[i][pro].includes(filterValue)
                if (match) break
            }
        if (this.handleTreeData(treeData[i].children,filterValue).length > 0 || match) {
            data.push({ ...treeData[i],children: this.handleTreeData(treeData[i].children,filterValue})
        }
        return data
}

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 20:18:08       49 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 20:18:08       53 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 20:18:08       42 阅读
  4. Python语言-面向对象

    2024-07-09 20:18:08       53 阅读

热门阅读

  1. for in和for of对比

    2024-07-09 20:18:08       22 阅读
  2. OpenHarmony4.x 系统模拟器环境

    2024-07-09 20:18:08       16 阅读
  3. PDF转Markdown的开源工具解析

    2024-07-09 20:18:08       29 阅读
  4. 力扣1878.矩阵中最大的三个菱形和

    2024-07-09 20:18:08       29 阅读
  5. 持续学习的艺术:SKlearn中模型的在线学习实践

    2024-07-09 20:18:08       26 阅读
  6. 代码随想录刷题day02-矩阵

    2024-07-09 20:18:08       28 阅读
  7. ListView

    ListView

    2024-07-09 20:18:08      28 阅读
  8. SSL 证书

    2024-07-09 20:18:08       25 阅读
  9. HP打印机Er报错 (重新开始或恢复按钮 ↓)

    2024-07-09 20:18:08       19 阅读
  10. php简单实现利用飞书群里机器人推送消息的方法

    2024-07-09 20:18:08       23 阅读
  11. 终于弄明白了什么是EI!

    2024-07-09 20:18:08       21 阅读
  12. 期货量化交易:探索金融投资的新领域

    2024-07-09 20:18:08       26 阅读
  13. 探索金融数据API:现代投资的关键工具

    2024-07-09 20:18:08       25 阅读