需求：在统计的表格中展示不同事项和数据，因为事项的名称和数量都不确定，所以需要动态渲染表头和列
效果：


这是后端返回的数据格式，leave是动态的，key的内容就是表头,使用Object.keys()返回一个数组,数组中就是key值列表，再v-for循环渲染

 getRecord(params).then(res => {
        this.recordList = res.data.data || [];
        //获取到整个统计列表，用for of将每一条的leave 中的key拿出
        for (const item of this.recordList) {
          let leave = item.leave;
          this.header = Object.keys(leave);
        }
      });

 <el-table-column label="请假(天)" align="center">
            <el-table-column
              v-for="(item, index) in header"
              :key="index"
              :label="item"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{scope.row.leave[item]}}</span>
              </template>
            </el-table-column>
          </el-table-column>

表格中的数据就不需要再进行循环，我当时就是走入误区


而scope.row.leave拿到的是leave一整个对象，且进行循环，所以是scope.row.leave[item]渲染他的value，才是正确的