javascript - Vue3 + Element Plus 开发网页，使用 el-table 表格组件完成横、列都是动态数据的渲染，并且动态数据中含有二级分类？

Question

大佬们，请问在 Vue3 + Element Plus 网页开发中，使用 el-table 表格组件能否实现如下图所示的复杂表格。

横、列都是动态，而且都含有2级（固定2级），且有单元格合并（如图），希望前端界大牛帮忙看一下！谢谢了！感谢！

数据结构毫无思路。

Answer 1

多级表头和表格合并都是有的。但是性能一般都会有瓶颈。

解决办法就是虚拟列表。

但是 Element 好像没支持虚拟化。所以你这里可以直接换一个其他库

---

比如 vxe-table ，但是我没用过这个库

Answer 2

在 Vue3 + Element Plus 中，使用 el-table 表格组件可以实现您所描述的复杂表格。下面是一个基本的示例，展示如何实现动态数据和二级分类的渲染：首先，确保您已经正确安装并导入了 Vue3 和 Element Plus。然后，您可以在组件中引入 el-table 和相关样式。

<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>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

export default {
components: {

ElTable,ElTableColumn,

},
setup() {

const tableData = ref([  { date: '2023-06-20', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },  { date: '2023-06-21', name: '李四', address: '上海市普陀区金沙江路 1517 弄' },  // 其他数据...]);return { tableData };

},
};
</script>

在上面的示例中，我们创建了一个简单的 el-table，并使用 `prop` 属性将每个列与数据对象中的属性进行绑定。您可以根据需要添加更多列，并相应地调整 `prop` 和 `label` 属性。要实现动态数据和二级分类，您可以在 `tableData` 中使用嵌套对象或数组来表示多级数据结构。例如：

const tableData = ref([
{

date: '2023-06-20',name: '张三',address: {  street: '金沙江路',  suburb: '1518 弄'}

},
{

date: '2023-06-21',name: '李四',address: {  street: '金沙江路',  suburb: '1517 弄'}

},
// 其他数据...
]);

在模板中，您可以使用 `el-table-column` 的 `span-method` 属性来实现单元格合并。这是一个函数，接受一个参数，表示当前单元格的行和列信息，您可以根据需要返回一个合并的单元格数组。例如：

<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.street" label="街道"></el-table-column>
<el-table-column prop="address.suburb" label="小区"></el-table-column>
</el-table>