introduce

1. Official documents

The official documentation for merging rows or columns is:

parameter instructions type An optional value The default value
span-method The calculation method for merging rows or columns Function({ row, column, rowIndex, columnIndex }) – –

You can combine rows or columns by passing a span-method method to the table. The method takes an object as an argument, and the four arguments row, column, rowIndex, and columnIndex are the current row, current column, current row index, and current column index, respectively.

2. Two ways to return

Array:

[1, 2] // Merge 1 row, 2 columns

Object:

{rowSpan: 3, // merge 3 rows colSpan: 1}

3. Table rendering order

Starting from the first row, the rowIndex is 0, and the column is from left to right. Then the second row, rowIndex 1, column left to right…

4. Empty operation

When cells are merged, the system takes the value of the first cell. Element manipulates cells by taking the value of the first cell, but does not empty the value of the second cell. This would result in the extra value being left unprocessed. Therefore, we need to manually locate the merged row or column, set its value to null, and return [0, 0].

Share the Demo

Let me show you the effect

demo1

demo2

DEMO1 (merge rows or columns respectively)

<! DOCTYPE HTML > < HTML > <head> <title bb3 elementUI </title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script SRC = "https://unpkg.com/[email protected]/lib/index.js" > < / script > < link rel = "stylesheet" type = "text/CSS" Href = "https://unpkg.com/[email protected]/lib/theme-chalk/index.css" > < / head > < body > < div id = "app" > < template > < div > <p> </p> <el-table :data=" TableData ":span-method=" arraysPanMethod" border style="width: 5px; 100%"> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="name" Sortable class ="amount1" sortable class ="amount1" ></el-table-column> <el-table-column ></el-table-column> <el-table-column prop="amount2" sortable label=" amount2 3"></el-table-column> </el-table> <p> <p> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="name" ></el-table-column> <el-table-column prop="amount1" ></el-table-column> <el-table-column ></el-table-column> <el-table-column prop="amount2" label=" amount3" ></el-table-column> </el-table> </div> </template> </div> <script type="text/javascript"> var Main = { data() { return { tableData: [ { id: {id: '12987123', name: 'Wong ', amount1: "234", amount2: "3.2", amount3: 10}, {id: '12987123', name:' Wong ', amount1:" '165', amount2: '4.43', amount3: 12}, {id: '12987124', name: 'Wong Wong ', amount1: '324', amount2: '1.9', amount3: }, {id: '12987125', name: 'Wong ', amount1: '621', amountt2: '2.2', amount3: 17}, {id: '12987126', name: "Wong", amount1: '539', amount2: '4.1', amount3:15}]}; }, methods: { arraySpanMethod({ row, column, rowIndex, ColumnIndex}) {if (rowIndex % 2 === 0) {if (rowIndex % 2 === 0) {return (rowIndex % 2 === 0) {return (rowIndex % 2 === 0); 1, colspan: 3} // return [1, 3]; / / omit the second and third column data, to prevent the column of raw data into the combining form after cell} else if (columnIndex = = = 1 | | columnIndex = = = 2) {return (0, 0); } } }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex % 2 === 0) { return { rowspan: 2, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; }}}}}; var Ctor = Vue.extend(Main) new Ctor().$mount('#app') </script> </body> </html>

demo2

<! DOCTYPE HTML > < HTML > <head> <title bb3 elementUI </title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script SRC = "https://unpkg.com/[email protected]/lib/index.js" > < / script > < link rel = "stylesheet" type = "text/CSS" Href = "https://unpkg.com/[email protected]/lib/theme-chalk/index.css" > < / head > < body > < div id = "app" > < template > < div > <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: Width ="150"></el-table-column> <el-table-column LABEL =" Date ">< el-table-column LABEL =" Date "> <el-table-column prop="name" label=" name" width="120"></el-table-column> <el-table-column label=" address ">< el-table-column Prop =" type "label=" province" </el-table-column> <el-table-column prop="city" label=" city" ></el-table-column> <el-table-column prop="address" label=" address" ></el-table-column> <el-table-column prop="zip" label=" zip" ></el-table-column> </el-table-column> </el-table-column> </el-table> <div> </template> </div> <script type="text/javascript"> var combineArr = []; Var Main = {data() {return {tableData: [{date: '2016-05-01', name: '2016-05-01', type: 'Shanghai ', city:' 0', address: '1518 Jinshajiang Road, Putuo District, Shanghai ', zip: 500}, {date: '2016-05-02', name:' Wang Xiaohu ', province: 'Shanghai ', city:' 1', address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai ', zip: 300},{date: '2016-05-02', name:' Wang Xiaohu ', province: 'Shanghai ', city:' 1', address: 'Lane 1520, Jinshajiang Road, Putuo District, Shanghai ', zip: 200}, {date: '2016-05-02', name:' Wang Xiaohu ', province: 'Shanghai ', city:' 1', address: 'Lane 1521, Jinshajiang Road, Putuo District, Shanghai ', zip: 100}, {date: '2016-05-03', name:' Wang Xiaohu ', province: 'Shanghai ', city: '2 ', address: 'Lane 1522, Jinshajiang Road, Putuo District, Shanghai ', zip: 100}, {date: '2016-05-04', name:' Wang Xiaohu ', province: 'Shanghai ', city:' 3', address: 'Lane 1523, Jinshajiang Road, Putuo District, Shanghai ', zip: 100}, {date: '2016-05-04', name:' Wang Xiaohu ', province: 'Shanghai ', city:' 3', address: '1524 Jinshajiang Road, Putuo District, Shanghai ', zip: 200}, {date: '2016-05-05', name:' Wang Xiaohu ', province: 'Shanghai ', city:' 4', address: 'Lane 1525, Jinshajiang Road, Putuo District, Shanghai ', zip: 300}]}; }, methods: { flitterData(arr) { let spanOneArr = [] let concatOne = 0 arr.forEach(function(item,index) { if (index === 0) { spanOneArr.push(1); } else {if(item.date === arr[index-1]. Date) {spanOneArr[concatOne] += 1; spanOneArr.push(0); } else { spanOneArr.push(1); concatOne = index; }; }}); return { one: spanOneArr, } }, arraySpanMethod({ row, column, rowIndex, columnIndex }) { if (rowIndex === 0) { if (columnIndex === 0) { return [1, 6]; } if (columnIndex < 6) { return [0, 0]; } } else { if (columnIndex === 0 ) { const _row = (this.flitterData(this.tableData).one)[rowIndex]; const _col = _row > 0 ? 1:0; combineArr = [_row, _col]; return combineArr; } else if (columnIndex === 3 || columnIndex === 5) { return combineArr; }}}}}; var Ctor = Vue.extend(Main) new Ctor().$mount('#app') </script> </body> </html>