介绍
1. 官网文档
合并行或列的办法官网文档为：
| 参数 | 阐明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | —— | —— |
通过给table传入span-method办法能够实现合并行或列，办法的参数是一个对象，四个参数row、column、rowIndex、columnIndex别离为以后行、当前列、以后行索引和当前列索引。
2. 两种返回形式
数组：
[1, 2] // 合并1行，2列对象：
{ rowspan: 3, // 合并3行 colspan: 1 // 合并1列}3. 表格渲染程序
从第一行开始，rowIndex为0，列从左到右（columnIndex从0到最初一列）；而后第二行，rowIndex为1，列从左到右……
4. 置空操作
合并单元格时，零碎会取第一个单元格的值。Element在操作单元格时，也是取第一个单元格的值，然而不会将第二个单元格的值置空，这就会导致多出的值没有做解决，因而，咱们须要手动解决，定位到被合并的行或者列，将其值置为空，即返回 [0, 0] 。
Demo分享
先展现一下成果
demo1
demo2
Demo1(别离合并行或列）
<!DOCTYPE html><html><head> <title>ElementUI合并行或列</title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui@2.14.0/lib/index.js"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui@2.14.0/lib/theme-chalk/index.css"></head><body> <div id="app"> <template> <div> <p>合并列</p> <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%"> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="amount1" sortable label="数值 1"></el-table-column> <el-table-column prop="amount2" sortable label="数值 2"></el-table-column> <el-table-column prop="amount3" sortable label="数值 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" label="姓名"></el-table-column> <el-table-column prop="amount1" label="数值 1（元）"></el-table-column> <el-table-column prop="amount2" label="数值 2（元）"></el-table-column> <el-table-column prop="amount3" label="数值 3（元）"></el-table-column> </el-table> </div> </template> </div> <script type="text/javascript"> var Main = { data() { return { tableData: [ { id: '12987122', name: '王小虎', amount1: '234', amount2: '3.2', amount3: 10 }, { id: '12987123', name: '王小虎', amount1: '165', amount2: '4.43', amount3: 12 }, { id: '12987124', name: '王小虎', amount1: '324', amount2: '1.9', amount3: 9 }, { id: '12987125', name: '王小虎', amount1: '621', amount2: '2.2', amount3: 17 }, { id: '12987126', name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15 } ] }; }, methods: { arraySpanMethod({ row, column, rowIndex, columnIndex }) { if (rowIndex % 2 === 0) { if (columnIndex === 0) { // 返回行和列的合并数量,返回一个数组或对象 // 返回对象 return { rowspan: 1, colspan: 3 } // 返回数组 // return [1, 3]; // 省略第二和第三列数据，避免合并列的原始数据填充到合并单元格后的表格里 } 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>ElementUI合并行或列</title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui@2.14.0/lib/index.js"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui@2.14.0/lib/theme-chalk/index.css"></head><body> <div id="app"> <template> <div> <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%"> <el-table-column prop="date" label="日期" width="150"></el-table-column> <el-table-column label="配送信息"> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column label="地址"> <el-table-column prop="province" label="省份"></el-table-column> <el-table-column prop="city" label="市区"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column prop="zip" label="邮编"></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: '王小虎', province: '上海', city: '普陀区0', address: '上海市普陀区金沙江路 1518 弄', zip: 500 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区1', address: '上海市普陀区金沙江路 1519 弄', zip: 300 },{ date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区1', address: '上海市普陀区金沙江路 1520 弄', zip: 200 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区1', address: '上海市普陀区金沙江路 1521 弄', zip: 100 }, { date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区2', address: '上海市普陀区金沙江路 1522 弄', zip: 100 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区3', address: '上海市普陀区金沙江路 1523 弄', zip: 100 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区3', address: '上海市普陀区金沙江路 1524 弄', zip: 200 }, { date: '2016-05-05', name: '王小虎', province: '上海', city: '普陀区4', address: '上海市普陀区金沙江路 1525 弄', 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>