React表格隐藏字段应直接过滤columns数组而非用CSS隐藏，避免UI与逻辑脱节；Vue中用v-if或计算属性动态控制列渲染；纯HTML用data-属性配合CSS隐藏；后端应提供字段元信息，前端避免硬编码取值逻辑。

React 表格中用 columns 配置隐藏字段

react 生态里（比如 ant design、material-ui table 或自研表格），列显隐最直接的方式是控制 columns 数组本身——删掉不想显示的项，而不是靠 css 隐藏。否则排序、筛选、导出时字段仍存在，逻辑和 ui 脱节。

常见错误现象：display: none 了某列单元格，但表头还在；或者用了 visibility: hidden，导致列宽占位仍在，表格错位。

• 只保留业务需要展示的字段，从源头过滤 columns 数组，例如：

  const visibleColumns = columns.filter(col => !['id', 'updatedAt'].includes(col.dataIndex));

• 如果后端返回字段固定，建议在请求层或数据预处理阶段就剔除敏感/冗余字段，避免前端反复判断
• dataIndex 和 key 必须唯一且稳定，删列后别让剩余列的 key 重复，否则 React 渲染会出问题

Vue 中通过 v-if 动态控制列渲染

Vue 模板里常用 v-if 控制单个 <el-table-column></el-table-column> 或 <v-data-table></v-data-table> 的 headers 项是否加载。这种方式比 JS 过滤更直观，但要注意响应式依赖的完整性。

使用场景：用户有「列设置」开关，需实时切换显隐；或不同角色看到的字段不同。

• 别把判断逻辑写死在模板里，提取成计算属性，例如：

  computed: { filteredHeaders() { return this.headers.filter(h => !this.hiddenFields.includes(h.value)); } }

• 如果用的是 el-table，注意 prop 和 label 字段必须匹配数据结构，删列后别漏改 scoped-slot 中的 scope.row.xxx
• 动态列下，fixed 属性容易失效，尤其当隐藏的是左侧固定列时，整个固定逻辑可能崩，建议固定列不参与动态隐藏

纯 HTML 表格用 data- 属性 + CSS 隐藏列

没有框架时，靠 data-field 标记列，再用 CSS 选择器隐藏。简单粗暴，但导出、打印、无障碍访问会受影响。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

性能影响小，兼容性好，适合后台管理页快速上线，但不适合复杂交互场景。

• 给 <th> 和对应所有 <code><td> 加相同 <code>data-field="status"，然后用

  table td[data-field="status"], table th[data-field="status"] { display: none; }

• 别用 nth-child 隐藏列——列序一变就失效；也别用 colgroup + visibility: collapse，IE 和部分移动端支持差
• 如果后续要导出 Excel，这类 CSS 隐藏对 SheetJS 等库无效，得额外传参告诉它哪些列该跳过

后端返回字段太多，前端过滤字段易踩的坑

很多人图省事，在 render 函数里用 Object.keys(row).filter(k => !hiddenKeys.includes(k)) 动态取值，结果发现字段顺序乱、空值没处理、嵌套字段（如 user.name）根本取不到。

核心问题在于：字段名不是字符串列表，而是结构化路径，且前端无法可靠推断哪些字段该显示。

• 后端应提供字段元信息接口，返回每个字段的 label、type、visible、path，前端按需消费，而非猜字段
• 前端硬编码字段名（如 ['name', 'email']）比正则或通配符更安全；用 includes 比 startsWith 更可控
• 如果字段带层级（address.city），别用 row[field] 直接取，得写个安全取值函数，比如 get(row, field)
事情说清了就结束。字段隐藏看着简单，真正卡住人的往往是导出逻辑、权限联动、以及那个忘了删的 dataIndex。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！