el-table 动态列 el-table-column

方法一

<el-table :data="tableData" stripe style="width: 100%" class="box-table">
  <el-table-column type="index" width="50"></el-table-column>
  <el-table-column v-for="(item,key,val, index) in tableData[0]" :key="index">
    <template slot="header">{{key}}</template>
    <template slot-scope="scope">{{tableData[scope.$index][key]}}</template>
  </el-table-column>
</el-table>

方法二

<el-table :data="tableData" stripe style="width: 100%" class="box-table">
  <el-table-column type="index" width="50"></el-table-column>
  <el-table-column v-for="(item,key,index) in tableData[0]" :key="index" :label="key">
    <template slot-scope="scope">
      <div>
        <span>{{scope.row[key]}}</span>
      </div>
    </template>
  </el-table-column>
</el-table>

方法一 方法二 的数据结构

data() {
  return {
    value: "",
    tableData: [
      {
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      },
      {
        date: "2016-05-04",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1517 弄"
      },
      {
        date: "2016-05-01",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1519 弄"
      },
      {
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1516 弄"
      }
    ]
  };
},

方法三

<el-table :data="tableDatas.tableData" stripe style="width: 100%" class="box-table">
  <el-table-column type="index" width="50"></el-table-column>
  <el-table-column
    v-for="(item,index) in tableDatas.fields"
    :key="index"
    :label="item.name"
    :prop="item.id"
  >
    <template slot-scope="scope">
      <div>{{scope.row[item.id]}}</div>
    </template>
  </el-table-column>
</el-table>

tableDatas: {
  fields: [
    {
      id: "date",
      name: "时间"
    },
    {
      id: "name",
      name: "名字"
    },
    {
      id: "address",
      name: "地址"
    }
  ],
  tableData: [
    {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄"
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄"
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄"
    }
  ]
},

参考：对象属性键值 [key] 属性问题

var obj = { key: 0, key1: 1, key2: 2, key3: 3 };

console.log(obj["key3"]);
console.log(obj.key3);