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'},
        },
     ]
  },
};

效果图

————————————————
版权声明:本文为CSDN博主「呆呆的企鹅」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u010740056/article/details/109001282

posted @ 2022-06-15 11:30  86727515  阅读(832)  评论(0编辑  收藏  举报