1. 效果图展示
2. 具体实现（以合并行为例）
2.1 实现思路
在 table 组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是 row , rowIndex , column , columIndex; 这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列。
2.2 完整代码
<template> <div class> <el-table :data="listData" :span-method="objectSpanMethod" border class="tableArea" style="width: 40%;" > <el-table-column label="商品类别" prop="productType" align="center" width="200"></el-table-column> <el-table-column label="商品数量" prop="amount" align="center"></el-table-column> <el-table-column label="商品价格" prop="price" align="center"></el-table-column> <el-table-column label="商品名称" prop="productName" width="200px" align="center"></el-table-column> <el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { listData: [], testArr1: [], testArr2: [], testPosition1: 0, testPosition2: 0, }; }, methods: { // 获取数据 queryData() { this.listData = [ { id: "201808300001", productType: "纺织品", amount: 20, productName: "上衣", price: "80", updateTime: "2018-08-30", }, { id: "201808300002", productType: "纺织品", amount: 20, productName: "裤子", price: "76", updateTime: "2018-08-31", }, { id: "201808300003", productType: "皮制品", amount: 100, productName: "挎包", price: "150", updateTime: "2018-08-31", }, { id: "201808300004", productType: "皮制品", amount: 180, productName: "鞋子", price: "76", updateTime: "2018-08-29", }, { id: "201808300005", productType: "绸缎", amount: 80, productName: "旗袍", price: "106", updateTime: "2018-08-31", }, { id: "201808300006", productType: "纺织品", amount: 20, productName: "短裙", price: "36", updateTime: "2018-08-30", }, { id: "201808300007", productType: "纺织品", amount: 80, productName: "短袖", price: "36", updateTime: "2018-08-30", }, { id: "201808300008", productType: "纺织品", amount: 20, productName: "短袖", price: "36", updateTime: "2018-08-30", }, { id: "201808300009", productType: "皮制品", amount: 20, productName: "钱包", price: "60", updateTime: "2018-08-30", }, { id: "201808300011", productType: "纺织品", amount: 90, productName: "手套", price: "60", updateTime: "2018-08-30", }, { id: "201808300012", productType: "纺织品", amount: 90, productName: "袜子", price: "36", updateTime: "2018-08-30", }, { id: "201808300013", productType: "饮料", amount: 100, productName: "雪碧", price: "5", updateTime: "2018-08-31", }, { id: "201808300013", productType: "纺织品", amount: 100, productName: "风衣", price: "50", updateTime: "2018-08-31", }, ]; this.rowspan(this.testArr1, this.testPosition1, "productType"); this.rowspan(this.testArr2, this.testPosition2, "amount"); }, rowspan(spanArr, position, spanName) { this.listData.forEach((item, index) => { if (index === 0) { spanArr.push(1); position = 0; } else { if ( this.listData[index][spanName] === this.listData[index - 1][spanName] ) { spanArr[position] += 1; spanArr.push(0); } else { spanArr.push(1); position = index; } } }); }, // 表格合并行 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = this.testArr1[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; } if (columnIndex === 1) { const _row = this.testArr2[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; } }, }, mounted() { this.queryData(); }, }; </script>
2.3 详细说明
rowspan（）这个函数就是用来返回 spanArr 数组的，定义每一行的 rowspan if( index === 0)，第一行，直接先给数组 push 进一个1，表示自己先占一行，position 是数组元素的位置 （此时是从数组元素的第一个开始，所以position 为 0）， position为 0 意思表示的就是数组的第一个元素。 当到了 index 为 2 的时候，if(this.listData[index][spanName] === this.listData[index-1][spanName])， 让第二行与第一行作比较： （1）如果第二行与第一行相等的话，position 就 +1，当有 n 行第一行相同，position 就为 n，表示向下合并 n 行； 第二行自己就 spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了； （2）如果第二行与第一行不相等的话，那么 spanArr.push(1);就让第二行自己独占一行； position = index ：把指针拿到 index 这行来，表示设置数组 spanArr[position] 的元素值，然后定义从此行开始向下合并几行 （可以根据示例研究下，当 index 为 2 时，position 为 2，当 index 为 3 时，第四行与第三行需要合并， 那么在数组的 position 元素就要 +1 了，也就是 spanArr[position] += 1）
:span-method="objectSpanMethod" 这个是官方给定的绑定属性和对应的方法，objectSpanMethod 传入了 { row, column, rowIndex, columnIndex } row: 当前行 column: 当前列 rowIndex：当前行号 columnIndex ：当前列号 该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象。 const _col = _row > 0 ? 1 : 0; 定义的这个单元格列的合并，我们项目只合并行，不合并列； _row：代表合并行的行数，_row 的值要么是 1，或者更大的自然正整数，要么是 0。 1代表：独占一行 更大的自然数：代表合并了若干行 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
3. 存在问题
当然也有小bug，当你鼠标移动到上面时hover不准确，当然肯定是有办法滴
cell-mouse-enter cell-mouse-leave cell-class-name
这三个官方提供的方法可以有效修改，但我还是没搞太懂，就不献丑了，大家可以先行研究。
