el-table分组合并行

接到一个需求,把数据按照天 分组显示 时间单独一行,数据在一块

这里新知识点:span-method

复制代码
const plist = ref([{
dateHeader:'2024-01-23',
list:[{dateHeader:'2024-01-23'},{name:'数据1',id:1},{name:'数据2',id:2}]
},
{
dateHeader:'2024-01-24',
list:[{dateHeader:'2024-01-24'},{name:'数据22',id:1},{name:'数据23',id:2}]
},
{
dateHeader:'2024-01-25',
list:[{dateHeader:'2024-01-25'},{name:'数据33',id:1},{name:'数据34',id:2}]
}])
const tableConfig = reactive([
  { prop: 'name', label: '计划名称', minWidth: '10' },
  { prop: 'id', label: 'ID', minWidth: '15' },
  { prop: 'operation', label: '操作', minWidth: '15' }
]);
     
const arraySpanMethod = (row, column, rowIndex, columnIndex) => {
  let hideColArr = [1, 2];//数组是根据要合并哪几个来定
  if (row.rowIndex == 0) {
    if (hideColArr.includes(row.columnIndex)) {
      return { display: 'none' };
    }
    return { rowspan: 1, colspan: 3 };
  }
};

 <template v-for="(item2, index2) in plist" :key="index2"> 
 <el-table
          :data="item2.list"
          :show-header="index2 === 0"
          :span-method="arraySpanMethod"
          :cell-style="{ padding: '3px' }"
        >
          <el-table-column
            v-for="(value, key) in tableConfig"
            :key="key"
            :prop="value.prop"
            :label="value.label"
            :min-width="value.minWidth"
          >
            <template #default="scope">
              <div v-if="scope.row.dateHeader">{{ scope.row.dateHeader }}</div>
            </template>
          </el-table-column>
        </el-table>
            </template>
相关推荐
Mintopia8 分钟前
🎭 一场浏览器里的文艺复兴
前端·javascript·aigc
Juchecar29 分钟前
Vue3 Class 和 Style 绑定详解
前端·vue.js
一名爱小惠的前端40 分钟前
🔥🔥🔥430+天,Naive UI Pro 跟大家见面
前端·vue.js·typescript
华仔啊40 分钟前
JS里怎么判断一个对象是否为空?怎么分清它到底是啥类型?
前端·javascript
码力无边_OEC40 分钟前
第三章:与页面共舞 —— Content Scripts 的魔法
前端·javascript
ZsTs11941 分钟前
还在死记 Vue 2 和 Vue 3 的区别?12个核心模块对比,让你彻底告别面试难题!
vue.js·面试·前端框架
兮漫天1 小时前
bun + vite7 的结合,孕育的 Robot Admin 【靓仔出道】(十八)
前端·javascript·vue.js
日月晨曦1 小时前
JavaScript中的this:一场关于"我是谁"的哲学之旅
前端·javascript
鹏多多1 小时前
前端图片裁剪Cropper.js核心功能与实战技巧详解
前端·javascript
秋天的一阵风1 小时前
前端小白变形记:你要学会这些设计模式!第七弹:代理模式
前端·javascript·面试