直接写死表格结构会导致列配置硬编码、逻辑重复、状态难同步、维护成本高；vue/react 动态渲染需关注列配置可复用性、key 唯一性、插槽扩展性、性能优化（如稳定引用、map 索引、set 存选中 id）及透传接口（排序、分页、loading）。

为什么不能直接用原生

写死结构

直接在 Vue 或 React 里写 <table><tr><td>{{ row.name }}</td></tr></table> 看似简单，但很快会暴露问题：列配置硬编码、排序/分页逻辑重复、空状态/加载态要每处手写、多选状态无法跨组件同步。更麻烦的是，当后端字段名变更或新增一列时，得改模板、改 JS、可能还要调样式——这不是封装，是复制粘贴式维护。

Vue 中用 v-for 动态渲染列和行的关键点

核心不是“能循环”，而是循环的粒度和数据绑定方式是否可复用：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• columns 数组必须含 prop（对应数据字段）和 label（表头文字），宽度、对齐、是否可排序等作为可选属性
• 行数据用 v-for="(row, index) in data"，key 必须是唯一标识（如 row.id），不能用 index —— 否则列表增删时 Vue 的 diff 会错乱
• 单元格内容别直接写 {{ row[col.prop] }}，留出 slot 插槽或 render 函数入口，否则日期格式化、状态徽标、操作按钮全得塞进模板里
• 避免在 <td> 内写复杂逻辑（比如三元判断 + 方法调用），提取成计算属性或作用域插槽参数 <h3>React 里用 <code>map() 渲染表格时容易忽略的性能陷阱

  常见错误是把整个 <tr> 渲染逻辑写在父组件内联函数里，导致每次 re-render 都新建函数引用，子组件（如 <code>TableRow）无法被 React.memo 缓存：

  • 把每行数据包装成对象传入 TableRow，而非传原始数组再 map —— 数据结构扁平化更利于 memo 判断
  • 列配置（columns）必须稳定引用，不要在 render 中动态生成数组，否则 useMemo 包裹也救不了
  • 带复选框的表格，选中状态别存在局部 state 里，用 new Set() 存 ID 比存对象数组更轻量，也方便用 has() 快速判断
  • 避免在 map 回调里调用 find、filter 等遍历方法 —— 大数据量下 O(n²) 性能崩塌，提前建好 Map 索引

  通用封装绕不开的三个透传接口

  无论 Vue 还是 React，真正可复用的表格组件必须把底层控制权交还给使用者，而不是自己决定“该不该分页”或“点哪列排序”：

  • onSortChange（React）或 @sort-change（Vue）事件，只通知字段和方向，不执行排序 —— 排序是本地还是请求后端，由父组件决定
  • pagination prop 是对象而非布尔值，至少含 currentPage 和 pageSize，让父组件能联动 el-pagination 或 Antd Pagination
  • loading 状态必须透传，且组件内部不管理 loading，只根据该 prop 控制骨架屏或禁用交互 —— 请求发起和结束时机在业务层

  漏掉任何一个，组件就从“可配置”退化成“半定制”，下次加个搜索框或导出按钮就得重写一遍。

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