如何使用 Vue3 + Element Plus 渲染包含二级分类的行列动态 Excel 表格？

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

如何使用 vue3 + element plus 渲染包含二级分类的行列动态 excel 表格？

如何在 vue3 + element plus 中实现行列均为动态数据的 excel 表格渲染，并且包含二级分类？

针对以下场景：

需要在 vue3 + element plus 项目中创建 excel 表格，其中行列均为动态数据，且包含二级分类。具体效果如下图：

[图片]

数据结构如何设计呢？

解答：

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

上一篇: docker怎么正确部署Tomcat及Web应用

下一篇: CentOS 8 将停止维护了！

如何使用 Vue3 + Element Plus 渲染包含二级分类的行列动态 Excel 表格？

随便看看