因為工作需要需要開發一個表格，列固定，但是行需要合並，而且不固定需要根據返回數據動態顯示隱藏，樣子如下：
行的分類可能有或者沒有，可能有公務員領導職務分類或者沒有，沒有的話就不會顯示它的數據。
看官方文檔使用的方法就是span-method, 詳細部分請查閱資料
// 學歷 educationData: { data: [], // 存放顯示的表格數據 leader: [], // 領導職務的行數據 manage: [], // 綜合管理類的行數據 other: [], // 未定義的行數據 tech: [], // 專技類的行數據 umale: [], // 行政執法的行數據 institutionalManagement: [], // 事業單位管理崗的行數據 institutionalTech: [], // 事業單位專技崗的行數據 institutionalWork: [], // 事業單位工勤崗的行數據 }, // 配置的字典值 // 領導職務分類 leaderMap: { leaderTotal: "小計", bureau: "廳局級正職", bureauDeputy: "廳局級副職", county: "縣處級正職", countyDeputy: "縣處級副職", township: "鄉科級正職", townshipDeputy: "鄉科級副職", probation: "試用期人員", unrated: "其他", }, leaderList: [ "leaderTotal", "bureau", "bureauDeputy", "county", "countyDeputy", "township", "townshipDeputy", "probation", "unrated", ], // 綜合管理類 manageTypeMap: { rankTotal: "小計", inspectorOne: "一級巡視員", // inspectorTwo: "二級巡視員", // investigatorOne: "一級調研員", // investigatorTwo: "二級調研員", // investigatorThree: "三級調研員", // investigatorFour: "四級調研員", // chiefClerkOne: "一級主任科員", // chiefClerkTwo: "二級主任科員", // chiefClerkThree: "三級主任科員", // chiefClerkFour: "四級主任科員", // clerkOne: "一級科員", // clerkTwo: "二級科員", // }, manageTypeList: [ "rankTotal", "inspectorOne", "inspectorTwo", "investigatorOne", "investigatorTwo", "investigatorThree", "investigatorFour", "chiefClerkOne", // "chiefClerkTwo", // "chiefClerkThree", // "chiefClerkFour", // "clerkOne", "clerkTwo", ], // 專業技術類 // 專業技術類 techTypeList: [ "techRankTotal", "inspGenOne", // "inspGenTow", "seniorExecutiveOne", "seniorExecutiveTwo", "seniorExecutiveThree", "seniorExecutiveFour", "executiveOne", "executiveTwo", "executiveThree", "executiveFour", "technician", ], techTypeMap: { techRankTotal: "小計", inspGenOne: "一級總監", // inspGenTow: "二級總監", // seniorExecutiveOne: "一級高級主管", // seniorExecutiveTwo: "二級高級主管", // seniorExecutiveThree: "三級高級主管", // seniorExecutiveFour: "四級高級主管", // executiveOne: "一級主管", // executiveTwo: "二級主管", // executiveThree: "三級主管", // executiveFour: "四級主管", // technician: "專業技術員", // }, // 行政執法類 umaleTypeList: [ "lawRankTotal", "supervise", "seniorHostOne", "seniorHostTwo", "seniorHostThree", "seniorHostFour", "hostOne", "hostTwo", "hostThree", "hostFour", "enforceLawOne", "enforceLawTwo", ], umaleTypeMap: { lawRankTotal: "小計", supervise: "督辦", // seniorHostOne: "一級高級主辦", // seniorHostTwo: "二級高級主辦", // seniorHostThree: "三級高級主辦", // seniorHostFour: "四級高級主辦", // hostOne: "一級主辦", // hostTwo: "二級主辦", // hostThree: "三級主辦", // hostFour: "四級主辦", // enforceLawOne: "一級行政執法員", // enforceLawTwo: "二級行政執法員", // }, // 事業單位管理崗 institutionalManagementTypeList: [ "mgtTotal", "StaffOne", "StaffTwo", "StaffThree", "StaffFour", "StaffFive", "StaffSix", "StaffSeven", "StaffEight", "StaffNine", "StaffTen", ], institutionalManagementTypeMap: { mgtTotal: "小計", StaffOne: "一級職員", // StaffTwo: "二級職員", // StaffThree: "三級職員", // StaffFour: "四級職員", // StaffFive: "五級職員", // StaffSix: "六級職員", // StaffSeven: "七級職員", // StaffEight: "八級職員", // StaffNine: "九級職員", // StaffTen: "十級職員", // }, // 事業單位專業技術崗 institutionalTechTypeList: [ "techTotal", "TechOne", "TechTwo", "TechThree", "TechFour", "TechFive", "TechSix", "TechSeven", "TechEight", "TechNine", "TechTen", "TechTwelve", "TechEleven", "TechThirteen", ], institutionalTechTypeMap: { techTotal: "小計", TechOne: "專技一級", // TechTwo: "專技二級", // TechThree: "專技三級", // TechFour: "專技四級", // TechFive: "專技五級", // TechSix: "專技六級", // TechSeven: "專技七級", // TechEight: "專技八級", // TechNine: "專技九級", // TechTen: "專技十級", // TechTwelve: "專技十二級", // TechEleven: "專技十一級", // TechThirteen: "專技十三級", // }, // 事業單位工勤人員 institutionalWorkTypeList: [ "whTotal", "WorkerOne", "WorkerTwo", "WorkerThree", "WorkerFour", "WorkerFive", "WorkerSix", ], institutionalWorkTypeMap: { whTotal: "小計", WorkerOne: "技術工一級", // WorkerTwo: "技術工二級", // WorkerThree: "技術工三級", // WorkerFour: "技術工四級", // WorkerFive: "技術工五級", // WorkerSix: "普通工", // },
表格的部分
<el-table :data="educationData.data" style="width: 100%" :span-method="objectSpanMethodEducation" stripe > <el-table-column prop="name" label> <template slot-scope="scope"> <span class="componyname" v-if="scope.$index ==0" style="color:#676380">/</span>
<!-- 當領導職務有數據時才顯示該分類 -->
<!-- 通過長度判斷，同時根據長度判斷顯示的行數，已經占用的行需要排除-->
<span class="componyname" style="color:#676380" v-if="educationData.leader.length>0 && scope.$index <1+educationData.leader.length && scope.$index >=1" >公務員領導職務</span> <span class="componyname" style="color:#676380" v-if="educationData.manage.length > 0 && scope.$index >=1+educationData.leader.length && scope.$index <1+educationData.leader.length+educationData.manage.length" >綜合管理類職級</span> <span class="componyname" style="color:#676380" v-if="educationData.tech.length > 0 && scope.$index >=1+educationData.leader.length+educationData.manage.length && scope.$index <1+educationData.leader.length+educationData.manage.length+educationData.tech.length" >專業技術類職級</span> <span class="componyname" style="color:#676380" v-if="educationData.umale.length > 0 && scope.$index >=1+educationData.leader.length+educationData.manage.length+educationData.tech.length && scope.$index <1+educationData.leader.length+educationData.manage.length+educationData.tech.length + educationData.umale.length" >行政執法類職級</span> <span class="componyname" style="color:#676380" v-if="educationData.institutionalManagement.length > 0 && scope.$index >=1+educationData.leader.length+educationData.manage.length +educationData.tech.length+ educationData.umale.length && scope.$index <1+educationData.leader.length+educationData.manage.length+educationData.tech.length + educationData.umale.length+educationData.institutionalManagement.length" >事業單位管理類職級</span> <span class="componyname" style="color:#676380" v-if="educationData.institutionalTech.length > 0 && scope.$index >=1+educationData.leader.length+educationData.manage.length +educationData.tech.length+ educationData.umale.length + educationData.institutionalManagement.length && scope.$index <1+educationData.leader.length+educationData.manage.length+educationData.tech.length + educationData.umale.length+educationData.institutionalManagement.length + educationData.institutionalTech.length" >事業單位專技類職級</span> <span class="componyname" style="color:#676380" v-if="educationData.institutionalWork.length > 0 && scope.$index >=1+educationData.leader.length+educationData.manage.length +educationData.tech.length+ educationData.umale.length + educationData.institutionalManagement.length + educationData.institutionalTech.length && scope.$index <1+educationData.leader.length+educationData.manage.length +educationData.tech.length+ educationData.umale.length+educationData.institutionalManagement.length + educationData.institutionalTech.length+ educationData.institutionalWork.length" >事業單位工勤類職級</span> <span class="componyname" style="color:#676380" v-if="educationData.other.length > 0 && scope.$index >=1+educationData.leader.length+educationData.manage.length +educationData.tech.length+ educationData.umale.length + educationData.institutionalManagement.length + educationData.institutionalTech.length+ educationData.institutionalWork.length" >未定義</span> </template> </el-table-column> <el-table-column prop="name" label="職務職級|統計項目" width="110"> <template slot-scope="scope"> <span class="componyname" v-if="scope.$index==0" style="text-align:left;width:100%;display:block;padding-left:10px;color:#676380" >總計</span> <span v-for="(item, key) in educationData.leader" :key="key+'cc'"> <span v-if="scope.$index==1+key" style="text-align:left;width:100%;display:block;padding-left:10px;color:#676380" >{{leaderMap[item]}}</span> </span> <span v-for="(item, key) in educationData.manage" :key="key+'aa'"> <span v-if="scope.$index==1+educationData.leader.length+key" style="text-align:left;width:100%;display:block;padding-left:10px;color:#676380" >{{manageTypeMap[item]}}</span> </span> <span v-for="(item, key) in educationData.tech" :key="key+'ac'"> <span v-if="scope.$index==1+educationData.leader.length+key+educationData.manage.length" style="text-align:left;width:100%;display:block;padding-left:10px;color:#676380" >{{techTypeMap[item]}}</span> </span> <span v-for="(item, key) in educationData.umale" :key="key+'ad'"> <span v-if="scope.$index==1+educationData.leader.length+key+educationData.manage.length+educationData.tech.length" style="text-align:left;width:100%;display:block;padding-left:10px;color:#676380" >{{umaleTypeMap[item]}}</span> </span> <span v-for="(item, key) in educationData.institutionalManagement" :key="key+'ae'"> <span v-if="scope.$index==1+educationData.leader.length+key+educationData.manage.length+educationData.tech.length+educationData.umale.length" style="text-align:left;width:100%;display:block;padding-left:10px;color:#676380" >{{institutionalManagementTypeMap[item]}}</span> </span> <span v-for="(item, key) in educationData.institutionalTech" :key="key+'af'"> <span v-if="scope.$index==1+educationData.leader.length+key+educationData.manage.length+educationData.tech.length+educationData.umale.length+educationData.institutionalManagement.length" style="text-align:left;width:100%;display:block;padding-left:10px;color:#676380" >{{institutionalTechTypeMap[item]}}</span> </span> <span v-for="(item, key) in educationData.institutionalWork" :key="key+'ag'"> <span v-if="scope.$index==1+educationData.leader.length+key+educationData.manage.length+educationData.tech.length+educationData.umale.length+educationData.institutionalManagement.length + educationData.institutionalTech.length" style="text-align:left;width:100%;display:block;padding-left:10px;color:#676380" >{{institutionalWorkTypeMap[item]}}</span> </span> <span class="componyname" style="text-align:left;width:100%;display:block;padding-left:10px;color:#676380" v-if="scope.$index==1+educationData.leader.length+ educationData.manage.length+educationData.tech.length+educationData.umale.length+educationData.institutionalManagement.length + educationData.institutionalTech.length+ educationData.institutionalWork.length" >未定義人員</span> </template> <!-- </el-table-column> --> </el-table-column> <el-table-column label="基本情況統計表"> <el-table-column prop="total" label="合計" width="40"> <template slot-scope="scope"> <span >{{scope.row.total}}</span> </template> </el-table-column> <el-table-column label="專業"> <el-table-column prop="philosophy" label="哲學"> <template slot-scope="scope"> <span >{{scope.row.philosoph}}</span> </template> </el-table-column> <el-table-column prop="economics" label="經濟學"> <template slot-scope="scope"> <span >{{scope.row.economics}}</span> </template> </el-table-column> <el-table-column prop="law" label="法學"> <template slot-scope="scope"> <span >{{scope.row.law}}</span> </template> </el-table-column> <el-table-column prop="education" label="教育學"> <template slot-scope="scope"> <span >{{scope.row.education}}</span> </template> </el-table-column> <el-table-column prop="literature" label="文學"> <template slot-scope="scope"> <span >{{scope.row.literature}}</span> </template> </el-table-column> <el-table-column prop="sciences" label="理學"> <template slot-scope="scope"> <span >{{scope.row.sciences}}</span> </template> </el-table-column> <el-table-column prop="engineering" label="工學"> <template slot-scope="scope"> <span >{{scope.row.engineering}}</span> </template> </el-table-column> <el-table-column prop="agriculture" label="農學"> <template slot-scope="scope"> <span >{{scope.row.agriculture}}</span> </template> </el-table-column> <el-table-column prop="history" label="歷史學"> <template slot-scope="scope"> <span >{{scope.row.history}}</span> </template> </el-table-column> <el-table-column prop="management" label="管理學"> <template slot-scope="scope"> <span >{{scope.row.management}}</span> </template> </el-table-column> <el-table-column prop="military_science" label="軍事學"> <template slot-scope="scope"> <span >{{scope.row.military_science}}</span> </template> </el-table-column> <el-table-column prop="medicine" label="醫學"> <template slot-scope="scope"> <span >{{scope.row.medicine}}</span> </template> </el-table-column> </el-table-column> </el-table-column> </el-table>
函數的部分
objectSpanMethodEducation({ rowIndex, columnIndex }) { /** * 合並行列 */ if (columnIndex === 0) { // 針對第一列操作 if (rowIndex === 0) { // 顯示總計 return { rowspan: 1, colspan: 1, }; } else if (rowIndex === 1 && this.educationData.leader.length > 0) { // 顯示領導職務 return { rowspan: this.educationData.leader.length, colspan: 1, }; } else if ( rowIndex === 1 + this.educationData.leader.length && this.educationData.manage.length > 0 ) { // 顯示綜合管理類 return { rowspan: this.educationData.manage.length, colspan: 1, }; } else if ( rowIndex === 1 + this.educationData.leader.length + this.educationData.manage.length && this.educationData.tech > 0 ) { // 顯示專業技術類 return { rowspan: this.educationData.tech.length, colspan: 1, }; } else if ( rowIndex === 1 + this.educationData.leader.length + this.educationData.manage.length + this.educationData.tech.length && this.educationData.umale.length > 0 ) { // 顯示行政執法類 return { rowspan: this.educationData.umale.length, colspan: 1, }; } else if ( rowIndex === 1 + this.educationData.leader.length + this.educationData.manage.length + this.educationData.tech.length + this.educationData.umale.length && this.educationData.institutionalManagement.length > 0 ) { // 顯示事業單位管理崗 return { rowspan: this.educationData.institutionalManagement.length, colspan: 1, }; } else if ( rowIndex === 1 + this.educationData.leader.length + this.educationData.manage.length + this.educationData.tech.length + this.educationData.umale.length + this.educationData.institutionalManagement.length && this.educationData.institutionalTech.length > 0 ) { // 顯示事業單位專技崗 return { rowspan: this.educationData.institutionalTech.length, colspan: 1, }; } else if ( rowIndex === 1 + this.educationData.leader.length + this.educationData.manage.length + this.educationData.tech.length + this.educationData.umale.length + this.educationData.institutionalManagement.length + this.educationData.institutionalTech.length && this.educationData.institutionalWork.length > 0 ) { // 顯示事業單位工勤 return { rowspan: this.educationData.institutionalWork.length, colspan: 1, }; } else if ( rowIndex === 1 + this.educationData.leader.length + this.educationData.manage.length + this.educationData.tech.length + this.educationData.umale.length + this.educationData.institutionalManagement.length + this.educationData.institutionalTech.length + this.educationData.institutionalWork.length && this.educationData.other.length > 0 ) { // 顯示未定義人員 return { rowspan: 1, colspan: 1, }; } else { return { rowspan: 0, colspan: 0, }; } } else { return; } },
這時的educationData還沒有數據，顯示是空的
this.educationData = { "data":[ { "total":"60", "economics":"4", "law":"24", "education":"1", "literature":"3", "engineering":"4", "agriculture":"18", "history":"1", "medicine":"11", "other":"3", }, { "statLev":"0111,0112,0121,0122,0131,0132,0141,0142,0190,0199", "total":"40", "economics":"4", "law":"19", "education":"1", "literature":"3", "engineering":"2", "agriculture":"10", "medicine":"6", "other":"2", }, { "statLev":"0122", "total":"2", "other":"2", }, { "statLev":"0131", "total":"2", "literature":"1", "medicine":"1", }, { "statLev":"0132", "total":"7", "economics":"1", "law":"3", "literature":"1", "engineering":"1", "agriculture":"3", "medicine":"1", }, { "statLev":"0141", "total":"22", "economics":"3", "law":"14", "education":"1", "agriculture":"6", "medicine":"2", }, { "statLev":"0142", "total":"7", "law":"2", "literature":"1", "engineering":"1", "agriculture":"1", "medicine":"2", }, { "statLev":"2021,2022,2023,2024,2025,2026,2027,2028,2029,2030", "total":"6", "engineering":"1", "agriculture":"4", "medicine":"2", }, { "statLev":"2025", "total":"1", "medicine":"1", }, { "statLev":"2026", "total":"1", "engineering":"1", "medicine":"1", }, { "statLev":"2027", "total":"2", "agriculture":"2", }, { "statLev":"2028", "total":"2", "agriculture":"2", }, { "statLev":"6010,6020,6030,6040,6050,6060", "total":"1", "agriculture":"1", }, { "statLev":"6040", "total":"1", "agriculture":"1", }, { "statLev":"9999", "total":"11", "law":"5", "agriculture":"3", "medicine":"3", "other":"1", } ], "row":[ ], "leader":[ "leaderTotal", "bureauDeputy", "county", "countyDeputy", "township", "townshipDeputy" ], "manage":[ ], "tech":[ ], "other":[ "other" ], "umale":[ ], "institutionalManagement":[ "mgtTotal", "StaffFive", "StaffSix", "StaffSeven", "StaffEight" ], "institutionalTech":[ ], "institutionalWork":[ "whTotal", "WorkerFour" ] }
顯示效果如上圖。