<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 0"> <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column> <el-table-column prop="time1" label="开始时段" align="center"> </el-table-column> <el-table-column prop="time2" label="结束时段" align="center"> </el-table-column> <el-table-column prop="week" label="申报策略" align="center"> </el-table-column> <el-table-column prop="date" label="平衡预度" align="center"> </el-table-column> <el-table-column prop="a" label="策略电力" align="center"> </el-table-column> <el-table-column prop="b" label="策略电价" align="center"> </el-table-column> <el-table-column prop="c" label="阶梯段" align="center"> </el-table-column> <el-table-column prop="d" label="电力" align="center"> </el-table-column> <el-table-column prop="e" label="电价" align="center"> </el-table-column> <el-table-column label="操作" width="160"> <template slot-scope="scope"> <el-button @click="add(scope.row)" type="text" size="small">新增</el-button> <el-button @click="del(scope.row)" type="text" size="small">删除</el-button> </template> </el-table-column> </el-table>
data() { return { tableData: [ { id: "12987123", time1: '2022', time2: '2022', week: "周二", date: "6月21", a: '1', b: '1223', c: '1', d: '1223', e: '1223', }, { id: "12987123", time1: '2022', time2: '2022', week: "周二", date: "6月21", a: '1', b: '1223', c: '13', d: '1223', e: '1223', }, { id: "12987124", time1: '2022', time2: '2022', week: "周二", date: "6月21", a: '1', b: '1223', c: '1', d: '1223', e: '1223', }, { id: "12987125", time1: '2022', time2: '2022', week: "周二", date: "6月21", a: '1', b: '1223', c: '1', d: '1223', e: '1223', }, ], }; }, methods: { add(e){ console.log(e,"e") }, del(){}, //合并单元格调用方法 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6) { /* 表格数据:this.tableList 判断合并行数:this.mergeColumn() */ const _row = (this.mergeColumn(this.tableData).one)[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } }, //判断合并行数 mergeColumn(data) { const spanOneArr = [] let concatOne = 0 data.forEach((item, index) => { if (index === 0) { spanOneArr.push(1) } else { //name 修改 if (item.id === data[index - 1].id) { //第一列需合并相同内容的字段 spanOneArr[concatOne] += 1 spanOneArr.push(0) } else { spanOneArr.push(1) concatOne = index } } }) return { one: spanOneArr } }, }
标签:el,1223,合并,spanOneArr,columnIndex,2022,table,id From: https://www.cnblogs.com/ting-0424/p/16965377.html