vue2 table动态绑定

Vue2中的table动态绑定可以通过使用el-table和el-table-column组件来实现。在el-table中，我们可以通过:data属性来绑定实际存储table的json数据，而在el-table-column中，我们可以通过使用v-for指令来动态绑定表头的列数据。在绑定时，需要注意以下几个细节问题：
1. 绑定时需要使用**:prop**而不是**prop**来指定属性名。
2. 绑定时需要使用**:label**而不是**label**来指定列名。
3. 带冒号的属性**:prop**表示是vue的来渲染的属性，不带冒号的属性**prop**表示的是常规html的属性。

下面是一个示例代码，其中tableDataType存储的是表头的列数据，而tableData存储的是实际存储table的json数据：

<template>
  <div id="app-4">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-for="items in tableDataType" :prop="items.nameProp" :label="items.nameLable" width="180"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableDataType: [
        { nameLable: '姓名', nameProp: 'name' },
        { nameLable: '日期', nameProp: 'date' },
        { nameLable: '地址', nameProp: 'address' }
      ],
      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 弄' }
      ]
    }
  }
}
</script>