不爱贞子爱爽子
バキューン

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

 

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

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"
]
}

显示效果如上图。

posted on 2020-09-10 10:30  不爱贞子爱爽子  阅读(1764)  评论(0编辑  收藏  举报

! !