element相同数据objectSpanMethod算法
<el-table :data="quotaList" style="width: 94%;margin-top: 10px" v-loading="loading" height="200" :key="loadKey" :span-method="objectSpanMethod" element-loading-background="rgba(0, 0, 0, 0.1)" element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading" > <el-table-column prop="startTime" label="配额生效时间"> <template slot-scope="scope"> <span >{{ scope.row.startTime.split(' ')[0] }} ~ {{ scope.row.endTime.split(' ')[0] }}</span> </template> </el-table-column> <el-table-column prop="factoryName" label="供应商"></el-table-column> </el-table>
data() { return { // 合并行变量 spanArr: [] } } // 网络请求拿数据 getData(){ let data = new FormData() this.$q.materials.getQuotaInfo(data).then((res)=>{ if(res?.data){ this.loadKey = +new Date() this.quotaList = [] this.quotaList = res.data.result // 调用相同编号方法 this.getSpanArr() } }) } // 获取相同id编号的数组 getSpanArr() { this.spanArr = [] for (let i = 0; i < this.quotaList.length; i++) { if (i === 0) { this.spanArr.push(1); this.pos = 0 } else { // 判断当前元素与上一个元素的ID是否相同 if (this.quotaList[i].id === this.quotaList[i - 1].id) { this.spanArr[this.pos] += 1; this.spanArr.push(0); } else { this.spanArr.push(1); this.pos = i; } } } }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 行列分组合并 if (columnIndex === 0) { const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col } } }
第二种
html里面
<el-table border :height="smallHeight" :data="tableData" style="width: 100%;margin-top: 10px" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" :span-method="objectSpanMethod" > <el-table-column label="物料编码" prop="id"> </el-table-column> <el-table-column label="物料名称" prop="materialName"></el-table-column> <el-table-column label="参照供应商" align="center"> <el-table-column prop="supplierName" label="供应商名称" align="center"> <template slot-scope="scope"> {{ scope.row.supplierName }} </template> </el-table-column> <el-table-column prop="latestOffer" label="最新报价" align="center"> <template slot-scope="scope"> {{ scope.row.latestOffer }} </template> </el-table-column> <el-table-column prop="purchaseNum" label="时间段内采购量" align="center"> <template slot-scope="scope"> {{ scope.row.purchaseNum }} </template> </el-table-column> </el-table-column> <el-table-column label="对比供应商" align="center"> <el-table-column prop="supplierName" label="供应商名称" align="center"> <template slot-scope="scope"> {{ scope.row.supplierName2 }} </template> </el-table-column> <el-table-column prop="latestOffer" label="最新报价" align="center"> <template slot-scope="scope"> {{ scope.row.latestOffer2 }} </template> </el-table-column> <el-table-column prop="purchaseNum" label="时间段内采购量" align="center"> <template slot-scope="scope"> {{ scope.row.purchaseNum2 }} </template> </el-table-column> </el-table-column> </el-table>
data里面
spanArr: [], //声明一个数组合并行 tableData: [ { id: 1010222201, materialName: '物料名称A', supplierName: '成都XX供应商', latestOffer: '10', purchaseNum: 90, supplierName2: '成都XX1供应商', latestOffer2: '100', purchaseNum2: 300 }, { id: 1010222201, materialName: '物料名称A', supplierName: '成都XX', latestOffer: '10', purchaseNum: 90, supplierName2: '成都XX2供应商', latestOffer2: '200', purchaseNum2: 400 }, { id: 1010222202, materialName: '物料名称B', supplierName: '成都XX3供应商', latestOffer: '33', purchaseNum: 80, supplierName2: '成都XX5供应商', latestOffer2: '500', purchaseNum2: 100 }, { id: 1010222203, materialName: '物料名称C', supplierName: '成都XX4供应商', latestOffer: '52', purchaseNum: 70, supplierName2: '成都XX6供应商', latestOffer2: '700', purchaseNum2: 900 } ]
methods 里面
init() { let params = { pageNum: this.pageNum, pageSize: this.pageSize, filterData: { materialCodes: [], purChaseDateEnd: moment(this.purChaseDateEnd).format('YYYYMMDD'), purChaseDateStart: moment(this.purChaseDateStart).format('YYYYMMDD'), supplierName: '' } } if (this.materialCode === '') { params.filterData.materialCodes = this.materialCodes } else { params.filterData.materialCodes = [this.materialCode] } this.$q.material.materialPrice(params).then((res) => { if (+res.code === 200) { console.log(JSON.parse(JSON.stringify(res.data.list))) this.tableData = [] this.tableData = JSON.parse(JSON.stringify(res.data.list)) this.getSpanArr() } }) }, getSpanArr() { this.spanArr = [] for (let i = 0; i < this.tableData.length; i++) { if (i === 0) { this.spanArr.push(1) this.pos = 0 } else { // 判断当前元素与上一个元素是否相同 if (this.tableData[i].materialCode === this.tableData[i - 1].materialCode) { this.spanArr[this.pos] += 1 this.spanArr.push(0) } else { this.spanArr.push(1) this.pos = i } } } }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { //合并第一列 const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } if (columnIndex === 1) { //合并第二列 const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } if (columnIndex === 2) { //合并第三列 const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } if (columnIndex === 3) { //合并第四列 const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } if (columnIndex === 4) { //合并第五列 const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } },
