element ui table 的合并单元格
或者
测试 vue 文件
<template><div><el-table:data="tableData"tooltip-effect="dark"style="width: 100%":span-method="arraySpanMethod"border><el-table-columnprop="name"label="姓名"></el-table-column><el-table-column label="日期"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column><el-table-columnprop="phone"label="电话"show-overflow-tooltip></el-table-column><el-table-columnprop=""label="操作"><template slot-scope="scope"><el-button@click.native.prevent="deleteRow(scope.$index, tableData)"type="text"size="small">移除</el-button></template></el-table-column></el-table></div></template><script>import axios from 'axios'export default {data() {return {tableData: [{name: '王小虎 ',date: '-05-02',address: '上海市普陀区金沙江路 1511 弄',phone: '123456',}, {name: '王小虎 ',date: '-05-02',address: '上海市普陀区金沙江路 1512 弄',phone: '123456'}, {name: '东北虎 ',date: '-05-02',address: '上海市普陀区金沙江路 1513 弄',phone: '123456'}, {name: '东北虎 ',date: '-05-01',address: '上海市普陀区金沙江路 1514 弄',phone: '1234567'}, {name: '东北虎 ',date: '-05-07',address: '上海市普陀区金沙江路 1515 弄',phone: '1234567'}, {name: '东北虎 ',date: '-05-07',address: '上海市普陀区金沙江路 1516 弄',phone: '12345673'}, {name: '赔钱虎 ',date: '-05-07',address: '上海市普陀区金沙江路 1517 弄',phone: '12345673'}],// 这里是合并需要用到的数据testArr1: [],testArr2: [],testArr3: [],testPosition1: 0,testPosition2: 0,testPosition3: 0,}},created() {this.toQuery() // 模拟 请求 tableData 数据},methods: {toQuery() {// this.tableData = axios 数据this.rowspan(this.testArr1, this.testPosition1, "name");this.rowspan(this.testArr2, this.testPosition2, "phone");this.rowspan(this.testArr3, this.testPosition3, "date");},// 合并行或者是列arraySpanMethod({ 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 === 3) {const _row = this.testArr2[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}if (columnIndex === 1) {const _row = this.testArr3[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},// 整理数据rowspan(spanArr, position, spanName) {this.tableData.forEach((item, index) => {if (index === 0) {spanArr.push(1);position = 0;} else {if (this.tableData[index][spanName] ===this.tableData[index - 1][spanName]&& // 这里为 图片 和 图二 数据异同点 这里用 name 判断是否同类 （注释则为图二）this.tableData[index].name ===this.tableData[index - 1].name) {spanArr[position] += 1;spanArr.push(0);} else {spanArr.push(1);position = index;}}});},}}</script>
有需求的可以直接使用哦
