element ui动态绑定el-table-column

数据结构：

skuAttrData: [
  {
    pid: '12233',
    pvNames: {
      尺码: '小',
      颜色: '红色',
      材质: '金属'
    },
    proPrice: '151.2',
    weight: '0',
    crawPrice: '333.3',
    isbeian: false
  },
  {
    pid: '12233',
    pvNames: {
      尺码: '大',
      颜色: '黑色',
      材质: '塑料'
    },
    proPrice: '151.2',
    weight: '0',
    crawPrice: '333.3',
    isbeian: false
  },
  {
    pid: '12233',
    pvNames: {
      尺码: '中',
      颜色: '灰色',
      材质: '不锈钢'
    },
    proPrice: '151.2',
    weight: '0',
    crawPrice: '333.3',
    isbeian: false
  }
]

我们要把上面的结构通过el-table渲染成下面的样子

因为我们的结构pvNames里面不管是键值对的数量还是key都是不确定的，所以我们不能一个一个的通过el-table-column写，而需要动态的通过v-for来遍历，我们需要把不确定的pvNames里的key全部单独通过一个数组取出来，然后遍历这个数组，数组的每一项作为el-table-column的label，然后通过scope.row.pvNames[key]来拿到对应key的值

代码如下：

<el-table :data="skuAttrData" border>
    <el-table-column prop="pid" label="SKU编码" width="220" align="center"></el-table-column>
    <el-table-column :label="item" v-for="(item, index) in headers">
      <template slot-scope="scope">
        {{scope.row.pvNames[item]}}
      </template>
    </el-table-column>
    <el-table-column prop="proPrice" label="换算价" align="center"></el-table-column>
    <el-table-column prop="proPrice" label="预估重量" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.weight"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="proPrice" label="系统定价" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.crawPrice"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="isbeian" label="是否备案" align="center">
      <template slot-scope="scope">
        <div>{{scope.row.isbei === false ? '否' : '是'}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="" label="操作" align="center">
      <template slot-scope="scope">
        <el-button type="primary">备案</el-button>
        <el-button type="danger">取消备案</el-button>
      </template>
    </el-table-column>
  </el-table>