Vue Element ui table 合并单元格

 <el-table
                :data="tableData"
                border
                :span-method="objectSpanMethod"
                style="width: 100%">
                <el-table-column
                prop="order"
                label="序号"
                align="center"
                width="50">
                </el-table-column>
                <el-table-column
                prop="name"
                :label="'名称'"
                align="center"
                fixed="left"
                width="70">
                </el-table-column>
</el-table>


<script>
export default {
  name: 'StationsStaTable',
  data () {
    return {
		tableData: [],
    },
 methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 对第一列 第二列 进行合并
        if (columnIndex === 1 || columnIndex === 0) {
            // 当 当前行与上一行内容相同时 返回0 0 意味消除
			if(rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]){
				return {
					rowspan: 0,
					colspan: 0
				};
			}else{
				let rows = 1;
                // 反之 查询相同的内容有多少行 进行合并
				for(let i = rowIndex; i < this.tableData.length - 1; i++){
					if (row[column.property] === this.tableData[i + 1][column.property]) {
						rows++;
					}
				}
                // 返回相同内容的行数
				return {
					rowspan: rows,
					colspan: 1
				};
			}
        }
      }
 }

使用span-method 进行合并

如果 是首次出现的内容就计算具体有多少行是一样的 然后返回rows行数作为rowspan

如果是与上一行内容相同 就返回0 0消除该单元格

返回rowspan和colspan的对象 意味着合并的行数和列

如果 不参与合并就返回0 0 以免出现多出行或列而导致错位的情况发生

转载于:https://my.oschina.net/xiaohuai4869/blog/3071048