- A+
所属分类：Web前端
因为工作需要需要开发一个表格，列固定，但是行需要合并，而且不固定需要根据返回数据动态显示隐藏，样子如下：
行的分类可能有或者没有，可能有公务员领导职务分类或者没有，没有的话就不会显示它的数据。
看官方文档使用的方法就是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" ] }
显示效果如上图。
