This is the 7th day of my participation in the August Gwen Challenge.

The premise

Note that when writing tables with elementUI, you often come across the ability to automatically add columns to the table

Since the subjects of each student’s examination may be different, the teacher needs to obtain the subject scores of each student when making statistics. The results are as followsThe data returned from the back end is in the following format

[{"id":1."sid":"11"."username":"Xiao Ming"."password":"123"."sex":"Female"."yuanxi":"School of Computer science"."banji":"161"."realname":"Students"."score": [{"id":null."sid":"11"."kemu":"Subject 1"."score":"98"."user":null}, {"id":null."sid":"11"."kemu":"Subject 2"."score":"97"."user":null}, {"id":null."sid":"11"."kemu":"Computer Fundamentals"."score":"85"."user":null}]}, {"id":5."sid":"12"."username":"White"."password":"123"."sex":"Female"."yuanxi":"School of Computer science"."banji":"162"."realname":"Students"."score": [{"id":null."sid":"12"."kemu":"Subject 1"."score":"70"."user":null}]}]
Copy the code

It’s going to return the personal information of each student and in score it’s going to give you the subject score of each student

implementation

The 1 data section needs to define a HEAD array

data() {
    return {
      // Dynamic column header
      header:[]
    };
  },
Copy the code

2 Then set the :render-header for the table

<el-table :data="cglist" border stripe style="width: 100% " :render-header="labelHead" >
Copy the code

Write the render-header callback function. Please ignore the following comments, however, the return value must be to h (‘ span,) this format, specific studies on the function can be reference segmentfault.com/a/119000001 here…

 labelHead(h,{column,index}){ // Dynamic header rendering
      //let l = column.label.length;
      //let f = 12; // The size of each word is roughly the same as the size of the font
      //column.minWidth = f * l; // minWidth is just a scale value, not a real length
      // Then place the column headers in a div block. Make sure the block is 100% wide or the table displays incomplete
      return h('span', {class:'table-head'.style: {width:'100%'}},[column.label])
    },
Copy the code

4. Fill the header with the data returned from the background in the method where you need it.5 Iterate through the header array where you need to generate dynamic columns to generate columns. At the same time, another data fill list corresponding to the table header is traversed within the row. Populates the data under the corresponding column when index is equal

  <el-table-column :label="item" v-for="(item, index) in header" :key="index"  align="center">
            <template slot-scope="scope">
                <span v-for="(item2,index2) in scope.row.score" :key="index2"  v-if="index2 == index"> {{ scope.row.score[index2].score }} </span>
            </template>
          </el-table-column>
Copy the code

The final result

To optimize the

When v-if is used with V-for, v-for has a higher priority than V-if, which means that V-if will be run separately in each V-for loop. Therefore, it is not recommended to use v-if and V-for together