列表合并单元格

1.项目名称进行截取显示

 
<a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{x:true}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">
         <span slot="projectName" slot-scope="text">
          <j-ellipsis :value="text" :length="20" />
        </span>
......



     data () {
          let ellipsis = (v, l = 10) => (<j-ellipsis value={v} length={15}/>)
          return {
          }
     }

2.根据项目名称进行合并单元格

{
            title:'项目名称',
            align:"center",
            dataIndex: 'projectName',
            customRender: (text, record, index) => {

              const data = this.dataSource; // 或其他你存储表格数据的地方
              const currentProjectRows = data.filter(row => row.projectName === text).reduce((acc, row) => {
                acc.push(row);
                return acc;
              }, []);

              const rowSpan = currentProjectRows.length;
              const { projectName: prevProjectName } = this.dataSource[index - 1] || {};

              if (index > 0 && text === prevProjectName) {
                return { children: ellipsis(text), attrs: { rowSpan: 0, display: 'none' } };
              }

              return { children: ellipsis(text), attrs: { rowSpan: rowSpan, colSpan: 1 } };

              // const data = this.dataSource; // 或其他你存储表格数据的地方
              // // 找到当前行所在项目的所有连续行
              // let currentProjectRows = [];
              // const count=0;
              // for (let i = count; i < data.length; i++) {
              //   if (data[i].projectName ===text) {
              //     currentProjectRows.push(data[i]);
              //   }
              // }
              //
              // const rowSpan = currentProjectRows.length;
              // // return { children: ellipsis(text), attrs: { rowSpan: rowSpan > 0 ? rowSpan : 1 ,colSpan: 1} }
              // if(index>0){
              //   if(text==this.dataSource[index-1].projectName){
              //     return { children: ellipsis(text), attrs: { rowSpan: 0, display: 'none' } };
              //   }
              // }
              // return { children: ellipsis(text), attrs: { rowSpan: rowSpan , colSpan: 1 } };

            },
          },