<el-table :data="tableData" :span-method="objectSpanMethod" border><el-table-columnprop="large_name"label="大类名称"align="center"width="180"></el-table-column><el-table-column prop="large_code" label="大类编码" align="center"></el-table-column><el-table-column prop="amount" label="大类预算汇总" align="center"></el-table-column><el-table-column prop="middle_name" label="中类名称"></el-table-column><el-table-column prop="middle_code" label="中类编码"></el-table-column><el-table-column prop="budget" label="预算"><template slot-scope="{ row }"><el-input v-model="row.budget"></el-input></template> </el-table-column>></el-table>
{data() {return {tableData: [{large_name: "电脑1",large_code: "D001",middle_name: "笔记本电脑1-1",middle_code: "D001-M001",amount: 100,budget: 30,},{large_name: "电脑1",large_code: "D001",middle_name: "笔记本电脑1-2",middle_code: "D001-M002",amount: 100,budget: 30,},{large_name: "电脑2",large_code: "D002",middle_name: "笔记本电脑2-1",middle_code: "D002-M001",amount: 100,budget: 30,},{large_name: "电脑2",large_code: "D002",middle_name: "笔记本电脑2-2",middle_code: "D002-M002",amount: 100,budget: 30,},{large_name: "电脑3",large_code: "D003",middle_name: "笔记本电脑3-1",middle_code: "D003-M001",amount: 100,budget: 30,},],// 每一行记录的合并数spanArr: [],};},mounted() {this.getSpanArr(this.tableData);},methods: {objectSpanMethod({rowIndex, columnIndex }) {if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},getSpanArr(data) {this.spanArr = [];if (data == null) {return;}let pos = 0;for (var i = 0; i < data.length; i++) {if (i === 0) {this.spanArr.push(1);pos = 0;} else {if (data[i].large_name === data[i - 1].large_name) {this.spanArr[pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);pos = i;}}}},}}
