如何使用 Vue3 + Element Plus 的 el-table 组件实现带两级分类、部分单元格合并的复杂表格？

发布日期： 2024-10-26 阅读量： 作者： 网络

如何使用 vue3 + element plus 的 el-table 组件实现带两级分类、部分单元格合并的复杂表格？

vue3 + element plus 实现复杂表格渲染

问题：如何使用 vue3 + element plus 的 el-table 组件实现下图所示的复杂表格？横、列都是动态的，且包含两级分类，部分单元格需要合并。

解决方案：

html 代码：

<el-table :span-method="arrayspanmethod" :data="tabledata">
  <el-table-column label="派出组" align="center" prop="group"></el-table-column>
  <el-table-column label="累计生产单" align="center" prop="total"></el-table-column>
  <el-table-column label="案件主办" align="center" prop="person"></el-table-column>
  <el-table-column v-for="(item, index) in headerlist" :key="index" :label="item.label" align="center" :prop="item.prop">
    <el-table-column v-for="(list, i) in item.sublist" :key="i" :label="list.label" align="center" :prop="list.prop">
      <template #default="scope">{{ scope.row[item.prop][list.prop] }}</template>
    </el-table-column>
  </el-table-column>
</el-table>

# vue # lsp

上一篇: wordpress访客记录怎么看

下一篇: 小程序中点赞和收藏功能的实现代码

如何使用 Vue3 + Element Plus 的 el-table 组件实现带两级分类、部分单元格合并的复杂表格？

随便看看