antd-vue-table 合并相同单元格记录

var spanArr=[];
var position=0;

//列合并
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {}
  };
  const _row = spanArr[index];
  const _col = _row> 0 ? 1 : 0;
         obj.attrs = {
                rowSpan: _row,
                colSpan: _col
    };

  return obj;
};

//计算合并 const rowspan
= (userData)=>{ spanArr=[]; position=0; userData.forEach((item,index) => { if(index === 0){ spanArr.push(1); position = 0; }else{
//需要合并的地方判断
if(userData[index].CheckItem === userData[index-1].CheckItem ){ spanArr[position] += 1; spanArr.push(0); }else{ spanArr.push(1); position = index; } } }); } //列名 const columnsScore = [ { title: '编号', dataIndex: 'ScoreId', 80, }, { title: '检查项目', dataIndex: 'CheckItem', 100, customRender: renderContent }, { title: '检查内容', dataIndex: 'CheckContent', 130 }, { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } } ]

//请求table数据
      this.$axios({  method: "post", url: "/QuaLity/GetQuality",}).then(res => {
      this.dataSource=res.data.Data;
      rowspan(res.data.Data);
      }).catch(() => { this.$message.error('连接服务器失败'););
 

最终:

原文地址:https://www.cnblogs.com/FanAspx/p/13032233.html