elementPlus表格

### 关于 Element Plus 中表格组件的使用方法 #### 使用 `el-table` 渲染基础表格 在 Vue3 和 Element Plus 中，`el-table` 是一个功能强大的表格组件。它可以通过绑定数据源 (`data`) 来动态渲染表格内容，并通过配置列定义 (`columns`) 实现自定义显示效果。 以下是基于 JavaScript 的简单示例： ```javascript <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2023-09-01', name: '张三', address: '北京市朝阳区' }, { date: '2023-09-02', name: '李四', address: '上海市浦东新区' } ] }; } }; </script> ``` 上述代码展示了如何创建一个简单的表格并绑定数据[^1]。 --- #### 处理嵌套二维数组的数据展示 当表格中的某些字段包含嵌套的二维数组时，可以利用计算属性或方法将其展平后再传递给表格组件。对于需要合并单元格的情况，则需配合 `span-method` 属性完成逻辑处理。 以下是一个完整的例子，演示如何渲染带嵌套二维数组的表格数据，并实现单元格合并： ```html <template> <el-table :data="flattenedTableData" :span-method="objectSpanMethod"> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="itemName" label="物品名称" width="180"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> </el-table> </template> <script> export default { data() { return { nestedData: [ { id: 1, items: [{ itemName: '苹果', price: 5 }, { itemName: '香蕉', price: 3 }] }, { id: 2, items: [{ itemName: '橙子', price: 4 }] } ], spanArray: [] }; }, computed: { flattenedTableData() { const result = []; this.nestedData.forEach(item => { item.items.forEach(subItem => { subItem.id = item.id; // 将父级 ID 添加到子项中 result.push(subItem); }); }); return result; } }, methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = this.spanArray[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } }, calculateSpan() { this.spanArray = []; let pos = 0; this.flattenedTableData.forEach((item, index) => { if (index === 0 || item.id !== this.flattenedTableData[index - 1].id) { this.spanArray[pos] = 1; pos++; } else { this.spanArray[pos - 1]++; this.spanArray[pos] = 0; } }); } }, mounted() { this.calculateSpan(); } }; </script> ``` 在这个例子中，我们通过 `calculateSpan()` 方法预计算出哪些行需要被合并，并借助 `span-method` 动态调整表格布局[^2]。 --- #### 手动控制复选框状态 为了确保表格复选框的状态能够正确同步，需要注意的是，Element Plus 内部会使用 `Object.is()` 进行对象比较。因此，在操作选中状态时，应始终依赖数据索引来定位目标行，而非直接传入选中对象。 下面是一段代码片段，说明如何手动取消或选中某一行： ```javascript methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.table.toggleRowSelection(this.tableData.find(d => d.id === row.id), true); // 根据唯一标识符匹配 }); } else { this.$refs.table.clearSelection(); // 清除所有选中状态 } } } ``` 这里的关键在于通过 `find()` 查找对应的目标行，而不是直接传入原始对象实例[^3]。 --- ### 性能优化与替代方案 尽管 `el-table` 提供了丰富的功能，但在大数据量场景下可能会遇到性能瓶颈。此时可考虑使用更高效的虚拟滚动技术，例如 `el-table-v2` 或第三方库如 `vxe-table`。后者不仅兼容 Vue2/Vue3，还提供了详尽的文档支持。 ---