antd+vue table表格-合并列

antd+vue table表格-合并列

查了好多网页方法都报错，才知道我用错了，记录一下：

columns要在data（）里面定义，如果在外面const后会报错，取不到list数据

 /**
  * @param text 当前单元格的值
  * @param array 当前分页所有数据
  * @param columns 当前列的dataIndex
  * @returns {number} 待合并单元格数量
  */
 const temp = {} // 当前重复的值,支持多列
 const mergeCells = (text, array, columns) => {
   let rowSpan = 0
   if(array.length == 1){
     rowSpan = 1
   }else{
     if (text !== temp[columns]) {
       temp[columns] = text
       array.forEach((item,index,arr) => {
         if (item.projectName === temp[columns]) {
           rowSpan ++
         }
       })
     }
   }
   return rowSpan
 }

export default {
  data() {
    columns : [
        {
          title: '序号',
          align: 'center',
          customRender: (text, record, index) => index + 1
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          customRender: (text, record, index) => {
              const obj = {
                children: text,
                attrs: {}
              }
              obj.attrs.rowSpan = mergeCells(text, this.data, 'projectName')
              return obj
          }
        },
        {
          title: '文件名称',
          dataIndex: 'fileName',
          scopedSlots: {customRender: 'fileName'},
        },
     ]
  },
};

效果图

2021-01-27 已更新