Vue Element ui table merge cells

 <el-table
                :data="tableData"
                border
                :span-method="objectSpanMethod"
                style="width: 100%">
                <el-table-column
                prop="order"
                label="Serial number"
                align="center"
                width="50">
                </el-table-column>
                <el-table-column
                prop="name"
                :label="'Name'"
                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 }) {
// Merge the first and second columns
        if (columnIndex === 1 || columnIndex === 0) {
            // When the content of the previous line is the same as that of the previous line, returning 0 means elimination
			if(rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]){
				return {
					rowspan: 0,
					colspan: 0
				};
			}else{
				let rows = 1;
                // Conversely, query how many lines of the same content are merged
				for(let i = rowIndex; i < this.tableData.length - 1; i++){
					if (row[column.property] === this.tableData[i + 1][column.property]) {
						rows++;
					}
				}
                // Returns the number of rows with the same content
				return {
					rowspan: rows,
					colspan: 1
				};
			}
        }
      }
 }

Use span method to merge

If it's the first time, calculate how many rows are the same, and then return the rows as rowspan.

If it is the same as the previous row, return 0 0 to eliminate the cell

Returning rowspan and colspan objects means the number of merged rows and columns

If you do not participate in the consolidation, you will return 0 to avoid dislocation caused by multiple trips or columns.

Tags: Front-end

Posted on Fri, 01 Nov 2019 07:43:49 -0700 by jrbissell