el-table如何根据动态条件（如状态字段）控制某行是否显示？

Question

在使用 Element Plus 的 `el-table` 时，常需根据后端返回的数据状态字段（如 `status: 'draft' | 'published' | 'archived'`）动态控制某行是否显示。常见误区是直接在 `el-table` 外层用 `v-if` 或对 `data` 数组做 `filter` 后赋值——这会导致分页失效、选中状态丢失、排序/筛选逻辑错乱，且无法响应式更新（如状态变更后表格不重渲染）。更严重的是，若结合 `el-table-column` 的 `scoped-slot` 或 `render-header`，手动过滤还可能破坏表头联动行为。开发者常困惑：如何在保持分页、多选、排序等原生能力的前提下，实现“按状态条件实时隐藏/显示特定行”，同时避免重复请求或手动维护 filteredData 与原始数据的同步？是否有官方推荐的响应式过滤方案？

Answer 1

```html

一、误区剖析：为什么直接 filter 或 v-if 是反模式？

在 Element Plus 的 el-table 中，开发者常将后端返回的原始数据 rawData 经 filter(status !== 'archived') 后赋值给 :data 属性。该做法看似简洁，实则触发多重副作用：

• ✅ 分页失效：el-pagination 依赖原始数据总量（total）与当前页数据切片（current-page × page-size），而过滤后数据长度失真；
• ❌ 多选状态丢失：el-table 内部通过引用比对维护 selection 数组，过滤后新数组导致引用断裂；
• ⚠️ 排序/筛选逻辑错乱：若用户已点击表头排序（触发 sort-change），再执行过滤会覆盖排序上下文；
• 🌀 响应式更新失效：Vue 3 的响应式系统无法自动追踪 filter() 生成的新数组与原始 reactive 数据的依赖关系。

二、核心矛盾：UI 层“隐藏” vs 数据层“过滤”

Element Plus 官方文档明确指出：el-table 的 :data 必须为稳定、完整、可索引的数据源（见 Table Attributes）。因此，“隐藏行”本质是视觉控制，而非数据裁剪。关键认知跃迁在于：

维度	错误范式（filter）	正确范式（CSS + computed）
数据完整性	破坏原始数组长度与索引映射	保留全部数据，仅控制渲染可见性
响应式链路	需手动 watch + reset filteredData	依赖 computed 自动重计算
分页兼容性	total 计算失准	total = rawData.length，完全解耦

三、官方推荐方案：使用 row-class-name + CSS 隐藏行

Element Plus 提供了 row-class-name 属性，允许为每一行动态绑定 class。这是官方支持的、零侵入的行级控制机制：

<el-table
  :data="rawData"
  :row-class-name="getRowClassName"
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection" />
  <el-table-column prop="title" label="标题" />
  <el-table-column prop="status" label="状态" />
</el-table>

<style scoped>
.hidden-row {
  display: none !important;
}
</style>

<script setup>
import { ref, computed } from 'vue'
const visibleStatus = ref(['draft', 'published'])
const rawData = ref([
  { id: 1, title: '草稿A', status: 'draft' },
  { id: 2, title: '已发布B', status: 'published' },
  { id: 3, title: '归档C', status: 'archived' },
  { id: 4, title: '草稿D', status: 'draft' },
  { id: 5, title: '已发布E', status: 'published' }
])

const getRowClassName = ({ row }) => {
  return !visibleStatus.value.includes(row.status) ? 'hidden-row' : ''
}
</script>

四、进阶实践：结合多选、排序、分页的全能力保全方案

当需要联动控制（如：仅对可见行启用多选、排序结果仅作用于可见行），必须引入 computed + watch 的协同机制。以下为生产级实现：

const filteredData = computed(() => 
  rawData.value.filter(item => visibleStatus.value.includes(item.status))
)

// ✅ 分页 total 仍用原始数据量
const total = computed(() => rawData.value.length)

// ✅ 排序逻辑在 computed 中完成（非 el-table 内置排序）
const sortedData = computed(() => {
  if (!sortConfig.value.prop) return filteredData.value
  return [...filteredData.value].sort((a, b) => {
    const aVal = a[sortConfig.value.prop]
    const bVal = b[sortConfig.value.prop]
    return sortConfig.value.order === 'ascending' 
      ? String(aVal).localeCompare(String(bVal)) 
      : String(bVal).localeCompare(String(aVal))
  })
})

// ✅ 多选状态基于原始 ID 维护，不受过滤影响
const selectedIds = ref(new Set())
const handleSelectionChange = (selection) => {
  selectedIds.value = new Set(selection.map(item => item.id))
}

五、响应式过滤引擎：封装可复用的 useTableFilter 组合式函数

为避免重复造轮子，我们可抽象出通用 Hook。该 Hook 自动处理过滤、排序、分页元信息同步，并暴露标准事件接口：

graph TD
  A[useTableFilter] --> B[输入：rawData, filters, sortConfig]
  A --> C[输出：filteredData, total, currentPageData]
  A --> D[内部：watch filters/sortConfig → 重计算]
  A --> E[事件：onFilterChange, onSortChange]
  B --> F[支持 status/draft/published/archived 多值匹配]
  C --> G[currentPageData = slice by pagination config]

六、性能优化要点：虚拟滚动与大数据量场景

当 rawData 超过 5000 条时，单纯 display: none 仍会触发大量 DOM 渲染。此时应结合 el-table-v2（Element Plus 官方虚拟滚动组件）或自定义 infinite-scroll 策略。关键原则：

• 过滤逻辑前置至请求层（如后端支持 ?status=draft,published）；
• 客户端过滤仅用于前端交互态（如临时切换视图）；
• 使用 key 强制重渲染时，确保 key 包含过滤条件哈希值（:key="`table-${hash(visibleStatus)}`"）。

七、避坑指南：scoped-slot 与 render-header 的特殊处理

当列使用 scoped-slot（如操作列按钮）时，即使行被 hidden-row 隐藏，slot 仍会执行。需在 slot 内二次判断：

<el-table-column label="操作">
  <template #default="{ row }">
    <span v-if="visibleStatus.value.includes(row.status)">
      <el-button size="small" @click="edit(row)">编辑</el-button>
    </span>
  </template>
</el-table-column>

同理，render-header 若需显示当前过滤状态（如 “显示 12/36 条”），应监听 filteredData 变化并更新。

八、测试验证清单：确保方案健壮性的 7 个断言

1. ✅ 切换 visibleStatus 后，表格 DOM 行数实时变化；
2. ✅ 全选按钮仅选中当前可见行；
3. ✅ 点击表头排序后，再次切换状态，排序顺序保持不变；
4. ✅ 分页器 total 始终等于 rawData.length；
5. ✅ 修改某行 status 字段（如 draft → archived），该行立即消失；
6. ✅ 浏览器回退/前进时，过滤状态通过 router.push({ query }) 持久化；
7. ✅ 控制台无 [Vue warn] Avoid mutating a prop directly 报错。

九、演进方向：服务端协同过滤与前端状态同步

对于复杂业务（如权限隔离+状态过滤），建议采用双阶段策略：

• 阶段一（服务端）：首次加载时，由后端根据用户角色 + 默认状态（如 status IN ('draft','published')）返回初始数据；
• 阶段二（客户端）：前端通过 WebSocket 或定时轮询监听状态变更事件（如 { id: 3, status: 'archived' }），局部更新 rawData.value.find(x => x.id === 3).status，触发 reactivity 链式更新。

该模式兼顾性能、一致性与用户体验，是大型管理后台的推荐架构。

十、总结与延伸思考

Element Plus 的设计哲学强调「数据驱动 UI」而非「UI 驱动数据」。真正的响应式过滤不是删除数据，而是建立数据状态与样式表现之间的精确映射。从 row-class-name 到 useTableFilter Hook，再到服务端事件总线协同，每一步演进都体现对 Vue 3 响应式原理与组件生命周期的深度理解。这不仅是表格技巧，更是构建可维护、可扩展、可测试的前端系统的底层方法论。

```