element table表格表头动态渲染效果demo（整理）

<template>
  <div class="app-container referBox">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="num1" label="数据1"> </el-table-column>
      <el-table-column prop="num2" label="数据2"> </el-table-column>
      <el-table-column v-for="(item,index) in stateData" :prop="item.prop" :label="item.label"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        /* tableData中的每一项state都要是一样的 */
        tableData: [{
            num1: '1',
            state: [{
              title: '动态数据3',
              stateNum: 3
            }, {
              title: '动态数据4',
              stateNum: 4
            }],
            num2: '2'
          },
          {
            num1: '2',
            state: [{
              title: '动态数据3',
              stateNum: 3
            }, {
              title: '动态数据4',
              stateNum: 4
            }],
            num2: '2'
          },
          {
            num1: '3',
            state: [{
              title: '动态数据3',
              stateNum: 3
            }, {
              title: '动态数据4',
              stateNum: 4
            }],
            num2: '2'
          },
        ],
        stateData: []
      }
    },
    mounted() {
      // 获取数组第一项
      const row = this.tableData[0].state
      this.stateData = []
      // 填充表头
      row.map((obj, index) => {
        this.stateData.push({
          key: parseInt(index + 1),
          label: obj.title,
          prop: obj.title,
          width: 200
        })
      })
      this.tableData.map(item => {
        item.state.map(ix => {
          item[ix.title] = ix.stateNum
        })
      })
      console.log('row: ', row);
      console.log('this.stateData: ', this.stateData);
      console.log('this.tableData: ', this.tableData);
    }
  }
</script>