elementUi +vue 实现 表格添加动态列

“这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战”

前提

在利用elementUI写表格的时候 经常会遇到表格 自动增加列的功能，在此记录一下

由于每个同学的考试的科目可能不一样，但是老师统计的时候需要获取到每个同学的科目分数。结果如下 后端返回的数据格式如下

[{"id":1,"sid":"11","username":"小明","password":"123","sex":"女","yuanxi":"计算机学院","banji":"161","realname":"学生","score":[{"id":null,"sid":"11","kemu":"科目一","score":" 98","user":null},{"id":null,"sid":"11","kemu":"科目二","score":"97","user":null},{"id":null,"sid":"11","kemu":"计算机基础","score":"85","user":null}]},{"id":5,"sid":"12","username":"小白","password":"123","sex":"女","yuanxi":"计算机学院","banji":"162","realname":"学生","score":[{"id":null,"sid":"12","kemu":"科目一","score":"70","user":null}]}]

返回的是每位同学的个人信息 在score里面有每个同学科目分数

实现

1 data区域需要定义一个head 数组

data() {
    return {
      //动态列头header
      header:[]
    };
  },

2 然后设置表格的 :render-header

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

3 写render-header的回调函数。请忽略下面的注释，但是，返回值必须是要h('span',)这个格式的，关于这个函数的具体研究可以参考这里 segmentfault.com/a/119000001…

 labelHead(h,{column,index}){ //动态表头渲染
      //let l = column.label.length;
      //let f = 12; //每个字大小,其实是每个字的比例值,大概会比字体大小打差不多大
      //column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
      //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
      return h('span',{class:'table-head',style:{width:'100%'}},[column.label])
    },

4.在你需要header的方法里把后台返回的数据填充到header里。 5在需要生成动态列的地方遍历header数组，生成列。同时在行内遍历与表头具有对应关系的另一个数据填充列表。在index相等的时候将数据填充到对应的列下

  <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>

最终效果

优化

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中 所以，不推荐v-if和v-for同时使用