医程通 网站做的太,平台运营,单页,网站建设简单需求:
1.合并行,相同数据合并
2,根据后端返回数据动态显示列名,
我这个业务需求是,每年增加一列,也就是列名不是固定的,后端返回数据每年会多一条数据,根据返回数据显示列名 实现:
html
el-table v-loadingloading :datadataList :span-metho…需求:
1.合并行,相同数据合并
2,根据后端返回数据动态显示列名,
我这个业务需求是,每年增加一列,也就是列名不是固定的,后端返回数据每年会多一条数据,根据返回数据显示列名 实现:
html
el-table v-loadingloading :datadataList :span-methodobjectSpanMethodel-table-column label序号 aligncenter typeindex :indexindexMethod /el-table-column label一级 aligncenter proptype1name :show-overflow-tooltiptrue width130px/el-table-column label二级 aligncenter proptype2name :show-overflow-tooltiptrue width130px/el-table-column label三级 aligncenter proptype3name :show-overflow-tooltiptrue width250px/el-table-column label合计 aligncenter propsums :show-overflow-tooltiptrue/el-table-column label年份 aligncenter prop :show-overflow-tooltiptrueel-table-column v-for(item,index) in titleList :keyindex :labelitem.title :propitem.value aligncenter width60px//el-table-column
/el-table
js
script
import { listAnnualReporte } from /api/system/annualReport;export default {name: annualReport,data() {return {// 遮罩层loading: true, // 总条数total: 0,// 表格数据dataList: [],titleList: [],spanArr: [], //用于存放每一行记录的合并数pos: null,spanArr1: [],pos1: null};},created() {this.getList();},methods: {/** 查询列表 */getList() {this.loading true;listAnnualReporte(this.queryParams).then(response {let list response.rows;console.log(年度报告);console.log(list);let tlist [];for (let i 0; i list.length; i) {let title 20;let obj list[i];//后端返回年份数据是c23,c24,c25,要拼成2023,2024,2025这样的列名Object.keys(obj).forEach(key {let titleObj {};let t key.slice(0, 1);let tn key.slice(1, 3);if (t c) {titleObj.title title tn;titleObj.value key;tlist.push(titleObj);}return;});break;}//给table赋值this.dataList list;//给动态列名赋值this.titleList tlist;//合并列数据this.getSpanArr(list);this.loading false;});},/** 自定义编号 */indexMethod(index) {let pageNum this.queryParams.pageNum - 1;if (pageNum ! -1 pageNum ! 0) {return index 1 pageNum * this.queryParams.pageSize;} else {return index 1;}},getSpanArr(data) {this.pos 0;this.pos1 0;for (let i 0; i data.length; i) {if (i 0) {// 如果是第一条记录即索引是0的时候向数组中加入this.spanArr.push(1);this.pos 0;this.spanArr1.push(1);this.pos1 0;} else {if (data[i].type1 data[i - 1].type1) {// 如果name相等就累加并且push 0 这里的判断视自己的判定依据改变this.spanArr[this.pos] 1;this.spanArr.push(0);} else {// 不相等push 1this.spanArr.push(1);this.pos i;}if (data[i].type2 data[i - 1].type2) {// 如果name相等就累加并且push 0 这里的判断视自己的判定依据改变this.spanArr1[this.pos1] 1;this.spanArr1.push(0);} else {// 不相等push 1this.spanArr1.push(1);this.pos1 i;}}}},/** 合并行 */objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 用于设置要合并的列 0 表示第一列// 名称 跨行显示if ([1].includes(columnIndex)) {const cRow this.spanArr[rowIndex];const cCol cRow 0 ? 1 : 0;return {rowspan: cRow, // 合并的行数colspan: cCol // 合并的列数为0表示不显示};}if ([2].includes(columnIndex)) {const cRow this.spanArr1[rowIndex];const cCol cRow 0 ? 1 : 0;return {rowspan: cRow, // 合并的行数colspan: cCol // 合并的列数为0表示不显示};}},}
};
/script
