vue实现动态列显示

1. 后端返回数据结构

"sheetList": [
	        {
	            "key1": "测试列1", --列名
	            "val1": "测试值1",
	            "key2": "测试列2", --列名
	            "val2": "测试值2"
	        },
	        {
	            "key1": "测试列3", --列名
	            "val1": "测试值3",
	            "key2": "测试列4", --列名
	            "val2": "测试值4"
	        }
    ]

handleJobData(sheetList) {
      let tableLabel = []
      let tableData = []
      // 组织下发tab标准作业卡数据格式
      data.map((item) => {
        let data = {}
        let label = {}
        Object.keys(item).map((k, i) => {
          if (k.indexOf('val') != -1) {
            data[k] = item[k]
          }
          if (k.indexOf('k') != -1) {
            label[k] = item[k]
          }
        })
        tableLabel.push(label)
        tableData.push(data)
      })

      let tableLabelObj = tableLabel[0] || {}
      let tableLabelArr = []
      Object.keys(tableLabelObj).map((k, i) => {
        let obj = {}
        let str = i + 1
        obj.prop = 'val' + str
        obj.label = tableLabelObj[k]
        tableLabelArr.push(obj)
      })
      this.jobTableData = tableData
      this.jobTableLbel = tableLabelArr
    },

<el-tab-pane label="标准作业卡">
  <job-card
    :tableData="jobTableData"
    :tableLabel="jobTableLbel"
  ></job-card>
</el-tab-pane>

<el-table
      :data="tableData"
      border
      style="width: 100%;margin-bottom:10px;"
      header-cell-class-name="todo-header-row"
      row-class-name="todo-row"
    >
    <el-table-column v-for="(item,i) in tableLabel" :key="i" :prop="item.prop" :label="item.label" align="center">
    </el-table-column>
</el-table>