el-table分组合并行

阿狸狸阿狸狸呀2024-01-27 23:21

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

这里新知识点：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>