vxe-table的合併行以及同一行的合併列

vxe-table 是一款優秀的前段插件,可以採用雙向綁定快速的顯示錶格內容,頁面元素使用即時插入的方式,讓頁面更順滑 ,今天來討論一下vxe-table的合併行以及同一行的合併列

合併需要使用的屬性是 : 

span-method

自定義合併函數，返回計算後的值 (不能用於虛擬滾動、展開行，不建議用於固定列、樹形結構)

因爲項目是採用jsp,而不是vue,所以使用的是jsp的寫法:

jsp頁面:

<div id="bsfxLayout" class="easyui-layout" data-options="fit: true">
	    <div data-options="region: 'center', border: false,fit: false,title: '',iconCls:''" style="border-bottom-width: 1px;" >
 			<input type="hidden" id="rprjContractId" name="rprjContractId" value="${rprjContractId}"/>
 			<input type="hidden" id="tableName" name="tableName" value="${tableName}"/>
	    	<div id="dyfxtab" class="easyui-tabs" data-options="fit: true,border: false,tabPosition:'top',headerWidth:40,tabHeight:25">
				<vxe-table
				  border
				  resizable
				  keep-source
				  height="100%"
				  ref="xTreeAcco"
				  empty-text=" "
			      :tooltip-config="tooltipConfig"
				  :cell-style="cellStyle"
				  :data="tableData"
				  :row-config="{isCurrent: true, isHover: true,height: 30,keyField:'id',useKey:true}"
				  :scroll-y="{enabled: true,gt:0}"
				  :keyboard-config="{isArrow: true, isEnter: true}"
				  header-align="center"
      			  align="left"
      			  :column-config="{resizable: true}"
				  @edit-actived="editActivedEvent"
				  @edit-closed="editClosedEvent"
				  :span-method="rowspanAndColspanMethod"
				  show-overflow
				  show-header-overflow
				  >
				  <vxe-column field="xh" title="序號" width="50" ></vxe-column>
				  <vxe-column field="bglx" title="變更類型" width="150"></vxe-column>
				  <vxe-column field="bglbh" title="變更編號" width="150"></vxe-column>
				  <vxe-column field="bgxm" title="工程名稱" width="150" :edit-render="{}"></vxe-column>
				  <vxe-column field="pzdwjwh" title="批准單位及文號" width="150" :edit-render="{}"></vxe-column>
				  <vxe-column field="bgmxlx" title="變更明細類型" width="150" :edit-render="{}"></vxe-column>
				  <vxe-column field="bgyy" title="變更原因" width="150" :edit-render="{}"></vxe-column>
				  <vxe-column field="zfdh" title="子目號" width="100" :edit-render="{}"></vxe-column>
				  <vxe-column field="zfdhsm" title="子目名稱" width="100" :edit-render="{}"></vxe-column>
				  <vxe-column field="zfdhdw" title="單位" width="100" :edit-render="{}"></vxe-column>
				  <vxe-colgroup title="變更(淨增減)工程量">
					  <vxe-column field="zjsl" title="1" align="right"  header-align="center" width="100" :edit-render="{}"></vxe-column>
				  </vxe-colgroup>
				  <vxe-colgroup title="變更單價(元)">
					  <vxe-column field="bghdj" title="2" align="right"  header-align="center" width="100" :edit-render="{}"></vxe-column>
				  </vxe-colgroup>
				  <vxe-colgroup title="變更(淨增減)金額(元)">
					  <vxe-column field="bgzjje" title="3=1*2"  align="right"  header-align="center" width="100" :edit-render="{}"></vxe-column>
				  </vxe-colgroup>
				</vxe-table>
	    	</div>
		</div>	    
  	</div>

js:

var rprjContractId = undefined;
var tableName = undefined;
$(function () {
	rprjContractId = $("#rprjContractId").val();
	tableName = $("#tableName").val();
	newVueApp();
});

function newVueApp(){
	app=new Vue({
		el: '#dyfxtab',
		data: {
			isValueDisabled:false,
			tableData:[],
			tooltipConfig: {//單元格提示
				showAll: true,
				enterable: true,
				contentMethod: ({ column, row}) => {
					const { field } = column
					// 重寫默認的提示內容
					return ''
				}
			}
		},
		created () {//第一次加載
			loadData();
		},
		methods: {
			currentChangeEvent ({ row }) {//單擊選中操作
			},
			cellContextMenuEvent ({ row }) {//右鍵選擇
				app.$refs.xTreeAcco.setCurrentRow(row)
			},
			loadData (){//刷新
				loadData();
			},
			getCurrentEvent () {//獲取選中行數據
				VXETable.modal.alert(JSON.stringify(this.$refs.xTreeAcco.getCurrentRecord()))
			},
			cellStyle ({ row, column }) {//單元格樣式修改
			if (column.field === 'secUid') {
				if (row.id <= '0') {
				return {
					color: '#FF7F00',
					cursor: 'default'
					}
				}
			}
			},
			editClosedEvent ({ row, column }) {//修改後保存
				//行編輯
			},
			editActivedEvent ({  row }) {//單元格禁用
				/*if(row.id<0){
					this.isValueDisabled=true;
				}else{
					this.isValueDisabled=false;
				}*/
				this.isValueDisabled=true;
			},
			rowspanMethod({ row, _rowIndex, column, visibleData }) {
			    // 合併行 : 需要合併的列字段,主要是把相鄰行的同一列的相等的單元格合併
			    let fields = ["xh", "bglx","bglbh","bgxm","pzdwjwh","bgmxlx","bgyy"];
			    const cellValue = row[column.property];
			    if (cellValue && fields.includes(column.property)) {
			        const prevRow = visibleData[_rowIndex - 1];
			        let nextRow = visibleData[_rowIndex + 1];
			        if (prevRow && prevRow[column.property] === cellValue) {
			          return { rowspan: 0, colspan: 0 };
			        } else {
			          let countRowspan = 1;
			          while (nextRow && nextRow[column.property] === cellValue) {
			            nextRow = visibleData[++countRowspan + _rowIndex];
			          }
			          if (countRowspan > 1) {
			            return { rowspan: countRowspan, colspan: 1 };
			          }
			       }
			    }
			},
			colspanMethod({ _rowIndex, columnIndex,row,column}) {
				//合併列,主要是把同一行相鄰列的值相同的單元格合併
			    //把列和列的標識記錄起來
			    let fields = ["zfdh", "zfdhsm"];//同一行合併列的範圍
			    let columnMap = {};
			    columnMap[1] = "zfdh";
			    columnMap[2] = "zfdhsm";
			    const cellValue = row[column.property];
			    if (cellValue && fields.includes(column.property)) {
					let prevColumn = columnMap[columnIndex - 1];
			        let nextColumn = columnMap[columnIndex + 1];
			        if (prevColumn && row[prevColumn] === cellValue) {
			          return { rowspan: 0, colspan: 0 };
			        } else {
			          let countColspan = 1;
			          while (nextColumn && row[nextColumn] === cellValue) {
			        	  nextColumn = columnMap[++countColspan + columnIndex];
			          }
			          if (countColspan > 1) {
			            return { rowspan: 1, colspan: countColspan };
			          }
			       }
				}
			},
			rowspanAndColspanMethod({ row, _rowIndex, column, visibleData,columnIndex }) {
               //合併行也合併列
			    //合併行 : 需要合併的列字段
			    let fields = ["xh", "bglx","bglbh","bgxm","pzdwjwh","bgmxlx","bgyy"];
			    const cellValue = row[column.property];
			    if (cellValue && fields.includes(column.property)) {
			        const prevRow = visibleData[_rowIndex - 1];
			        let nextRow = visibleData[_rowIndex + 1];
			        if (prevRow && prevRow[column.property] === cellValue) {
			          return { rowspan: 0, colspan: 0 };
			        } else {
			          let countRowspan = 1;
			          while (nextRow && nextRow[column.property] === cellValue) {
			            nextRow = visibleData[++countRowspan + _rowIndex];
			          }
			          if (countRowspan > 1) {
			            return { rowspan: countRowspan, colspan: 1 };
			          }
			       }
			    };
			    //把列和列的標識記錄起來
			    let columnMap = {};
			    columnMap[0] = "xh";
			    columnMap[1] = "bglx";
			    columnMap[2] = "bglbh";
			    columnMap[3] = "bgxm";
			    columnMap[4] = "pzdwjwh";
			    columnMap[5] = "bgmxlx";
			    columnMap[6] = "bgyy";
			    columnMap[7] = "zfdh";
			    columnMap[8] = "zfdhsm";
			    const cellValue2 = row[column.property];
			    let fields2 = ["xh", 
                "bglx","bglbh","bgxm","pzdwjwh","bgmxlx","bgyy","zfdh","zfdhsm"];//同一行合併列的範圍
			    if (cellValue && fields2.includes(column.property)) {
					let prevColumn = columnMap[columnIndex - 1];
			        let nextColumn = columnMap[columnIndex + 1];
			        if (prevColumn && row[prevColumn] === cellValue) {
			          return { rowspan: 0, colspan: 0 };
			        } else {
			          let countColspan = 1;
			          while (nextColumn && row[nextColumn] === cellValue) {
			        	  nextColumn = columnMap[++countColspan + columnIndex];
			          }
			          if (countColspan > 1) {
			            return { rowspan: 1, colspan: countColspan };
			          }
			       }
				}
			},
		}
	})
}

//加載數據
function loadData(){
	this.loading = true;
	$.ajax({
		method: "post",
		url: "./iface/searchRprjContractTableData?rprjContractId="+rprjContractId+"&taleName=" + tableName,
		data: {},
		success: function (data) {
			app.loading = false;
			seqVueTree=1;
			var datalist=[];
			if(data.data && data.data.length > 0 ){
				var list = data.data;
				for (let index = 0; index < list.length; index++) {
					const element = list[index];
					datalist.push(element);
				}
			}
			app.tableData= datalist;//查詢出的數據賦值給表
		},
		error: function(err) {
			app.loading = false
			console.log("失敗了: " + err);
		}
	});
}

效果圖