基于MEAN栈的Bootstrap表格按列值是否为空实现行过滤需求

嘿，刚好我之前做过类似的MEAN栈表格过滤需求，给你一套完整的实现方案，分前端轻量过滤和后端大数据过滤两个方向，你可以根据自己的数据量来选：

如果你的表格数据量不大，直接在前端过滤更高效，不用折腾后端。

1. 组件逻辑（.ts文件） #

首先在你的Angular组件里定义原始数据、过滤后的数据，还有过滤方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-table-filter',
  templateUrl: './table-filter.component.html',
  styleUrls: ['./table-filter.component.css']
})
export class TableFilterComponent {
  // 原始表格数据，假设结构是 { col1: string, col2?: string }
  originalTableData = [
    { col1: '用户A', col2: '已映射角色1' },
    { col1: '用户B' }, // 第二列无值
    { col1: '用户C', col2: '已映射角色2' },
    { col1: '用户D' }
  ];
  filteredTableData: typeof this.originalTableData = [...this.originalTableData];
  selectedFilter = 'All'; // 默认显示全部

  // 下拉框切换时触发的过滤方法
  onFilterChange() {
    switch(this.selectedFilter) {
      case 'Mapped':
        // 只保留第二列有非空值的行
        this.filteredTableData = this.originalTableData.filter(item => 
          item.col2 !== undefined && item.col2.trim() !== ''
        );
        break;
      case 'UnMapped':
        // 只保留第二列无值或为空的行
        this.filteredTableData = this.originalTableData.filter(item => 
          !item.col2 || item.col2.trim() === ''
        );
        break;
      default: // All选项
        this.filteredTableData = [...this.originalTableData];
    }
  }
}

2. 模板（.html文件） #

把下拉框和表格绑定起来，用ngModel绑定选中值，change事件触发过滤：

<!-- 下拉过滤器 -->
<div class="mb-3">
  <select 
    class="selectpicker form-control" 
    [(ngModel)]="selectedFilter" 
    (change)="onFilterChange()"
  >
    <option value="All">All</option>
    <option value="Mapped">Mapped</option>
    <option value="UnMapped">UnMapped</option>
  </select>
</div>

<!-- Bootstrap表格 -->
<table class="table table-hover table-striped">
  <thead class="table-dark">
    <tr>
      <th>第一列（必选数据）</th>
      <th>第二列（可选数据）</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of filteredTableData">
      <td>{{ row.col1 }}</td>
      <td>{{ row.col2 || '未映射' }}</td> <!-- 无值时显示友好占位符 -->
    </tr>
  </tbody>
</table>

3. 必做配置 #

别忘了在你的Angular模块里导入FormsModule，不然ngModel用不了：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他模块（比如BrowserModule）
    FormsModule
  ]
})
export class YourModule { }

如果你的数据是从后端异步获取的，记得在数据加载完成后初始化过滤数据：

// 假设你有一个数据服务
this.dataService.getTableData().subscribe(data => {
  this.originalTableData = data;
  this.filteredTableData = [...data];
});

如果你的表格数据上千上万条，前端过滤会卡顿，那就把过滤逻辑放到后端，通过接口参数返回对应数据：

1. Express路由处理 #

// 假设用Mongoose操作MongoDB
const express = require('express');
const router = express.Router();
const YourModel = require('../models/yourModel');

router.get('/table-data', async (req, res) => {
  const filterType = req.query.filter || 'All';
  let query = {};

  switch(filterType) {
    case 'Mapped':
      // 查询第二列存在且非空的文档
      query.col2 = { $exists: true, $ne: '', $ne: null };
      break;
    case 'UnMapped':
      // 查询第二列不存在或为空的文档
      query.$or = [
        { col2: { $exists: false } },
        { col2: { $in: ['', null] } }
      ];
      break;
    // All的话query为空，返回所有数据
  }

  try {
    const tableData = await YourModel.find(query);
    res.status(200).json(tableData);
  } catch(err) {
    res.status(500).json({ message: '获取数据失败', error: err });
  }
});

module.exports = router;

2. 前端调用接口 #

修改Angular组件的过滤方法，换成调用后端接口：

onFilterChange() {
  this.dataService.getFilteredTableData(this.selectedFilter).subscribe(data => {
    this.filteredTableData = data;
  });
}

然后在你的数据服务里定义接口方法：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {}

  getFilteredTableData(filter: string = 'All') {
    return this.http.get(`/api/table-data?filter=${filter}`);
  }
}

这样就搞定啦，小数据用前端过滤，大数据用后端过滤，根据自己的场景选就行😎

内容的提问来源于stack exchange，提问作者techie