El table dynamic merge row, column fixed data display

Time:2021-7-19

Because the work needs to develop a table, the columns are fixed, but the rows need to be merged, and they need to be dynamically displayed and hidden according to the returned data

 

There may or may not be a line classification, or there may be a civil servant leadership position classification, if not, its data will not be displayed.

El table official document

The way to read official documents is span method. Please refer to the information for details

//Education background
educationData: {
        Data: [], // stores the displayed table data  
        Leader: [], // row data of leader position
        Manage: [], // comprehensively manage the row data of the class
        Other: [], // undefined row data
        Tech: [], // row data of special technology
        Umale: [], // line data of administrative law enforcement
        Institutionalmanagement: [], // row data of management post of public institution
        Institutionaltech: [], // line data of specialized technical posts in public institutions
        Institutionalwork: [], // row data of work and attendance posts in public institutions
      },
//Configured dictionary value
//Classification of leadership positions
      leaderMap: {
        Leadtotal: "subtotal",
        Bureau: Department and bureau level principal,
        Bureau Department: "deputy of department and bureau",
        Country: "County Department Head",
        County Department: "deputy of County Department",
        Township: "township section chief post",
        Townshipdepartment: "township section deputy",
        Probation: "probationary personnel",
        Unrated: "other,",
      },
      leaderList: [
        "leaderTotal",
        "bureau",
        "bureauDeputy",
        "county",
        "countyDeputy",
        "township",
        "townshipDeputy",
        "probation",
        "unrated",
      ],
//Comprehensive management
      manageTypeMap: {
        Ranktotal: "subtotal,",
        Inspector one: "Inspector I"//
        Inspector two: "Inspector II"//
        Investigatorone: "first class investigator"//
        Investigatortwo: "level 2 investigator"//
        Investigatorthree: "level 3 investigator"//
        Investigatorfour: "level 4 investigator"//
        Chief clerkone: "first level chief staff member"//
        Chief clerktwo: "second level chief staff member"//
        Chief clerkthree: "three level chief staff member"//
        Chief clerkfour: "level 4 chief staff member"//
        Clearkone: "first class section member"//
        Cleartwo: "second level section member"//
      },
      manageTypeList: [
        "rankTotal",
        "inspectorOne",
        "inspectorTwo",
        "investigatorOne",
        "investigatorTwo",
        "investigatorThree",
        "investigatorFour",
        "chiefClerkOne", //
        "chiefClerkTwo", //
        "chiefClerkThree", //
        "chiefClerkFour", //
        "clerkOne",
        "clerkTwo",
      ], // professional technology
      //Professional technology
      techTypeList: [
        "techRankTotal",
        "inspGenOne", //
        "inspGenTow",
        "seniorExecutiveOne",
        "seniorExecutiveTwo",
        "seniorExecutiveThree",
        "seniorExecutiveFour",
        "executiveOne",
        "executiveTwo",
        "executiveThree",
        "executiveFour",
        "technician",
      ],
      techTypeMap: {
        Techranktotal: "subtotal,",
        Inspgenone: "first level director"//
        Inspgentow: "second level director"//
        Senior executive one://
        Senior executive two: "Senior Manager II"//
        Senior executive: senior executive level 3//
        Senior executive four: "senior executives at level 4"//
        Executiveone: "first level supervisor"//
        Executive two: "second level supervisor"//
        Executivethreee: "level 3 supervisor"//
        Executive four: "level 4 supervisor"//
        Technician: "professional technician"//
      },
      //Administrative law enforcement
      umaleTypeList: [
        "lawRankTotal",
        "supervise",
        "seniorHostOne",
        "seniorHostTwo",
        "seniorHostThree",
        "seniorHostFour",
        "hostOne",
        "hostTwo",
        "hostThree",
        "hostFour",
        "enforceLawOne",
        "enforceLawTwo",
      ],
      umaleTypeMap: {
        Lawranktotal: "subtotal",
        Supervision: supervision//
        Seniorhostone: "first class senior sponsor"//
        Senior hosttwo: "secondary senior sponsor"//
        Seniorhostthree: "three level senior sponsor"//
        Seniorhostfour: "four level senior sponsor"//
        Hostone: "first level hosting"//
        Hosttwo: "secondary host"//
        Hostthree: "three level hosting"//
        Hostfour: "four level hosting"//
        Enforcelawone: "administrative law enforcement officer I"//
        Enforcelawtwo: "administrative law enforcement officer II"//
      },
      //Public institution management post
      institutionalManagementTypeList: [
        "mgtTotal",
        "StaffOne",
        "StaffTwo",
        "StaffThree",
        "StaffFour",
        "StaffFive",
        "StaffSix",
        "StaffSeven",
        "StaffEight",
        "StaffNine",
        "StaffTen",
      ],
      institutionalManagementTypeMap: {
        Mgttotal: "subtotal,",
        Staffone: "first level staff"//
        Stafftwo: "secondary staff"//
        Staffthree: "level 3 staff"//
        Stafffour: "level 4 staff"//
        Stafffive: "level 5 staff"//
        Staffsix: "level 6 staff"//
        Staffseven: "level 7 staff"//
        Staffeight: "level 8 employee"//
        Staffnine: "level 9 staff"//
        Stafften: "level 10 staff"//
      },
      //Professional technical post of public institution
      institutionalTechTypeList: [
        "techTotal",
        "TechOne",
        "TechTwo",
        "TechThree",
        "TechFour",
        "TechFive",
        "TechSix",
        "TechSeven",
        "TechEight",
        "TechNine",
        "TechTen",
        "TechTwelve",
        "TechEleven",
        "TechThirteen",
      ],
      institutionalTechTypeMap: {
        Techtotal: "subtotal,",
        Techone: "technical level 1"//
        Techtwo: "technical level 2"//
        Techthree: "technical level 3"//
        Techfour: "technical level 4"//
        Techfive: "technical level 5"//
        Techsix: "technical level 6"//
        Techseven: "technical level 7"//
        Techeight: "technical level 8"//
        Technine: "technical level 9"//
        Techten: "technical level 10"//
        Techwell: "level 12 professional skill"//
        Techeleven: "technical level 11"//
        Techthirteen: "expertise level 13"//
      },
      //Service personnel of public institutions
      institutionalWorkTypeList: [
        "whTotal",
        "WorkerOne",
        "WorkerTwo",
        "WorkerThree",
        "WorkerFour",
        "WorkerFive",
        "WorkerSix",
      ],
      institutionalWorkTypeMap: {
        Whtotal: "subtotal",
        Workerone: "technical level 1"//
        Workertwo: "technician level 2"//
        Workerthree: "technician level 3"//
        Workerfour: "technical level 4"//
        Workerfive: "technical level 5"//
        Workersix: "ordinary worker"//
      },

Part of the form

/
           
                 
Leadership of civil servants
                Comprehensive management rank
                Professional and technical rank

                Administrative law enforcement rank

                Management rank of public institution
                Professional and technical ranks of public institutions

                Work service rank of public institution

                Undefined
              
            
            
              
                total
                
                  {{leaderMap[item]}}
                
                
                  {{manageTypeMap[item]}}
                
                
                  {{techTypeMap[item]}}
                

                
                  {{umaleTypeMap[item]}}
                

                
                  {{institutionalManagementTypeMap[item]}}
                
                
                  {{institutionalTechTypeMap[item]}}
                
                
                  {{institutionalWorkTypeMap[item]}}
                

                Undefined人员
              
              
            
            
              
                
                  {{scope.row.total}}
                
              
              
                
                  
                    {{scope.row.philosoph}}
                  
                
                
                  
                    {{scope.row.economics}}
                  
                
                
                  
                    {{scope.row.law}}
                  
                
                
                  
                    {{scope.row.education}}
                  
                
                
                  
                    {{scope.row.literature}}
                  
                
                
                  
                    {{scope.row.sciences}}
                  
                
                
                  
                    {{scope.row.engineering}}
                  
                
                
                  
                    {{scope.row.agriculture}}
                  
                
                
                  
                    {{scope.row.history}}
                  
                
                
                  
                    {{scope.row.management}}
                  
                
                
                  
                    {{scope.row.military_science}}
                  
                
                
                  
                    {{scope.row.medicine}}

Part of a function

objectSpanMethodEducation({ rowIndex, columnIndex }) {
      /**
       *Merge ranks
       */
      If (columnindex = = = 0) {// for the first column operation
        If (rowindex = = = 0) {// display total
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else if (rowIndex === 1 && this.educationData.leader.length > 0) {
          //Show leadership positions
          return {
            rowspan: this.educationData.leader.length,
            colspan: 1,
          };
        } else if (
          rowIndex === 1 + this.educationData.leader.length &&
          this.educationData.manage.length > 0
        ) {
          //Display integrated management
          return {
            rowspan: this.educationData.manage.length,
            colspan: 1,
          };
        } else if (
          rowIndex ===
            1 +
              this.educationData.leader.length +
              this.educationData.manage.length &&
          this.educationData.tech > 0
        ) {
          //Display professional technology
          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
        ) {
          //Display administrative law enforcement
          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
        ) {
          //Display institution management post
          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
        ) {
          //Professional post of display institution
          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
        ) {
          //Display work attendance of public institutions
          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
        ) {
          //Show undefined people
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      } else {
        return;
      }
    },

At this time, the education data has no data, and the display is empty

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

The display effect is shown in the figure above.