template( :span-method=“objectSpanMethod”)
<!-- 表格 --><el-table:data="tableData"style="width: 80%; margin: 20px":header-cell-style="{background: '#F8F8F8', height: '40px', padding: '0', color: '#333333'}"border:span-method="objectSpanMethod"><el-table-column align="center" header-align="center" :show-overflow-tooltip="true" width="100" ><template slot-scope="scope">{{scope.row.index + 1 }}</template></el-table-column><el-table-column prop="subjects" label="费用科目" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column><el-table-column prop="classType" label="分类" align="center" header-align="center" :show-overflow-tooltip="true" ></el-table-column><el-table-column prop="price" label="金额" align="center" header-align="center" :show-overflow-tooltip="true" ></el-table-column></el-table>
data数据结构
return{tableData:[{index:0,subjects:'一次性就废',price:'1,200.00元'},{index:1,subjects:'医疗备用金',price:'1,200.00元'},{index:2,subjects:'试住费',price:'1,200.00元'},{index:3,subjects:'餐费',classType: '餐费（长者+保姆）',price:'1,200.00元'},{index:4,subjects:'餐费',classType: '餐费（长者）',price:'1,200.00元'}]}
methods方法
//合并第一列flitterData (arr) {let spanOneArr = []let concatOne = 0arr.forEach((item, index) => {console.log(item,index)if (index === 0) {spanOneArr.push(1)} else {if (item.subjects === arr[index - 1].subjects) {//第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1spanOneArr.push(0)} else {spanOneArr.push(1)concatOne = index};}});return {one: spanOneArr,}},objectSpanMethod ({row, column, rowIndex, columnIndex }) {if (columnIndex === 1) {// 判断哪一列const _row = (this.flitterData(this.tableData).one)[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col};}},
