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>
相关推荐
Jimmy11 分钟前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
Spider_Man20 分钟前
栈中藏玄机:从温度到雨水,单调栈的逆袭之路
javascript·算法·leetcode
jstart千语28 分钟前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
BUG收容所所长38 分钟前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
盗德42 分钟前
Vue渲染引擎的范式革命:从虚拟DOM到Vapor模式
前端·vue.js
BUG收容所所长43 分钟前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
Dolphin_海豚2 小时前
vapor 的 IR 是如何被 generate 到 render 函数的
前端·vue.js·vapor
小妖6662 小时前
Next.js 怎么使用 Chakra UI
前端·javascript·ui
胡西风_foxww2 小时前
从数据丢失到动画流畅:React状态同步与远程数据加载全解析
前端·javascript·react.js·同步·异步·数据·状态
格调UI成品2 小时前
[特殊字符] 数据可视化结合 three.js:让 3D 呈现更精准,3 个优化经验谈
javascript·3d·信息可视化