Ant Design Vue表格行或者列的合并

前言

一、a-table表格的行合并？

开发场景：客户的超市采购，一个采购合同可能从一个客户采购多个商品，所以表格反映出来应该是一对多的关系。
效果图：

二、行合并代码

1.处理表格数据的方法、行合并的方法

data(){
	      const renderContent = (text, row, index) => {
        const obj = {
          children: text,
          attrs: {},
        }
        const spanArr = this.getSpanArr(this.dataSource, 'orderNo').spanArr
        const _row = spanArr[index]
        obj.attrs.rowSpan = _row
        return obj
      }
	return{
	columns:[
			{
	          title: '合同号',
	          dataIndex: 'orderNo',
	          width: 180,
	          align: "left",
	          customRender: renderContent
	        },
	        	{
	          title: '合同负责人',
	          dataIndex: 'people',
	          width: 180,
	          align: "left",
	          customRender: renderContent
	        },
        ]
	}
},
methods:{
   //表格合并方法
      getSpanArr(tableData, itemProperty) {
        if (tableData.length === 0) {
          return false
        }
        const spanArr = []
        let pos
        for (let i = 0; i < tableData.length; i++) {
          if (i === 0) {
            spanArr.push(1)
            pos = 0
          } else {
            if (tableData[i][itemProperty] && tableData[i][itemProperty] === tableData[i - 1][itemProperty]) {
              spanArr[pos] += 1
              spanArr.push(0)
            } else {
              spanArr.push(1)
              pos = i
            }
          }
        }
        return {
          spanArr: spanArr,
        }
      }
}

三、a-table表格的列合并？

开发场景：个别数据下方要进行数据的汇总。
效果图：

四、列合并代码

1.处理表格数据的方法、列合并的方法

		data(){
		 const renderContentlm = (text, row, index) => {
	        const obj = {
	          children: text,
	          attrs: {},
	        }
	        const spanArr = []
	        const spanArrbefore = this.getSpanArr(this.dataSourceM, 'pnameIdName').spanArr
	        for (let item of spanArrbefore) {
	          if (item != '') {
	            spanArr.push(0)
	          } else {
	            spanArr.push('')
	          }
	        }
	        const _col = spanArr[index]
	        obj.attrs.colSpan = _col
	        return obj
      }
      const renderContentM = (text, row, index) => {
	        const obj = {
	          children: text,
	          attrs: {},
	        }
	        const spanArr = this.getSpanArr(this.dataSourceM, 'pnameIdName').spanArr
	        const _col = spanArr[index]
	        obj.attrs.colSpan = _col
	        return obj
	      }
	      return{
		      columnsM:[
		        {
		          title: '成品',
		          dataIndex: 'pnameIdName',
		          align: "left",
		          customRender: renderContentM
		        },
		        {
		          title: '日期',
		          dataIndex: 'inboundTime',
		          align: "left",
		          customRender: renderContentlm
		        },
		        {
		          title: '重量',
		          dataIndex: 'productWeight',
		          align: "left",
		        }
	       	 ]
	      }
	}
	methods:{
		//表格合并方法
      getSpanArr(tableData, itemProperty) {
        if (tableData.length === 0) {
          return false
        }
        const spanArr = []
        for (let i = 0; i < tableData.length; i++) {
          if (tableData[i][itemProperty] == '汇总') {
            spanArr[i] = 2
          } else {
            spanArr[i] = ""
          }
        }
        return {
          spanArr: spanArr,
        }
      }
	}