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 };
  }
};

 

el-table分组合并行_第1张图片

你可能感兴趣的:(vue.js,elementui,javascript)