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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章