前端——》ant-design-vue组件的使用之三（a-table表格的行列合并）

效果

代码

表头列合并

columns = {
            title: node.date,
            dataIndex: node.date,
            key: node.date,
            width: 260,
            children: [
                 {
                     title: '上午',
                     dataIndex: node.date,
                     key: node.AM,
                     width: 130,
                     scopedSlots: { customRender: 'editMorning' }
                 },
                 {
                     title: '下午',
                     dataIndex: node.date,
                     key: node.PM,
                     width: 130,
                     scopedSlots: { customRender: 'editAfternoon' }
                 }
             ]
          }

表头列合并的关键就是这个 children 字段。

行合并

// data中定义
columns: {
	 title: '生产批号/任务编号',
	  width: 100,
	  dataIndex: 'taskName',
	  key: 'taskName',
	  fixed: 'left',
	  customRender: (text, record, index) => {
	      const obj = {
	          children: text !== null ? text : '',
	          attrs: {}
	      }
	      obj.attrs.rowSpan = this.mergeCells(text, this.queryResult, 'taskName', index)
	      return obj
	  }
}

// methods中定义，合并表格
mergeCells (text, data, key, index) {
     // 上一行该列数据是否一样
     if (index !== 0 && text === data[index - 1][key]) {
         return 0
     }
     let rowSpan = 1
     // 判断下一行是否相等
     for (let i = index + 1; i < data.length; i++) {
         if (text !== data[i][key]) {
             break
         }
         rowSpan++
     }
     return rowSpan
 },