element中table实现多表头动态数据/合并行/合并列/导出excel功能实现

最新推荐文章于 2025-03-17 09:07:14 发布

置顶

Horses丶浩

最新推荐文章于 2025-03-17 09:07:14 发布

阅读量3.8k

点赞数 2

分类专栏：遇到的问题 element vue 文章标签： vue javascript js

本文链接：https://blog.youkuaiyun.com/weixin_45093724/article/details/106159149

版权

参考地址:https://blog.youkuaiyun.com/hefeng6500/article/details/82778680?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
实现如图功能:
在这里插入图片描述
html: 其中:span-method="dataArraySpanMethod" 是合并列需要的属性

<template>
  <div>
    <el-table class="crmonepage-hello" ref="tabled" :data="list" style="width: 100%" :span-method="dataArraySpanMethod">
      <el-table-column
        v-for="(col,index) in cols"
        :label="col.label"
        :key="index"
        :width="col.width || null"
        :prop="col.prop"
      >
        <el-table-column
          v-for="(props, propsindex) in col.propsChildren"
          :label="props.label"
          :key="propsindex"
          :width="props.width || null"
          :prop="props.prop"
        ></el-table-column>
      </el-table-column>
    </el-table>
    <button @click="exportExcel"></button>
  </div>
</template>

数据格式:

  data() {
   
    return {
   
      list: [
        {
   aQty: "1",bQty: "8",cQty: "2",dQty: "-1",eQty: "11",brand: "一点点",brand2: "列合并测试",brand3: "测试"},
        {
   aQty: "3",bQty: "2",cQty: "12",dQty: "-3",eQty: "121",brand: "一点点",brand2: