欢迎光临
我的个人博客网站

el-table动态合并行,列固定的数据显示

因为工作需要需要开发一个表格,列固定,但是行需要合并,而且不固定需要根据返回数据动态显示隐藏,样子如下:

el-table动态合并行,列固定的数据显示

 

 行的分类可能有或者没有,可能有公务员领导职务分类或者没有,没有的话就不会显示它的数据。

el-table官方文档

看官方文档使用的方法就是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" ] }

显示效果如上图。

赞(0) 打赏
未经允许不得转载:张拓的天空 » el-table动态合并行,列固定的数据显示
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏