模板程式碼

<template>
  <div id="app-4">
    <el-table
      :data="tableData"        //tableData是實際儲存tabl的json資料
      style="width: 100%">
      <el-table-column v-for="items in tableDataType"  //tableDataType儲存的是表頭的列資料
                       :prop="items.nameProp"   //使用動態繫結時候prop前面必須要有“：”號
                       :label="items.nameLable"  //使用動態繫結時候label前面必須要有“：”號
                       width="180">
      </el-table-column>
    </el-table>
  </div>
</template>
 

vue程式碼

 <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>
 

實現效果

注意

使用vuejs來實現對table的繫結操作，程式碼實現本身很簡單。但是在實現的過程中需要注意如下細節問題：（1）繫結時候 el-table-column 的屬性中需要用**:prop** 而不是**prop**
      （2）繫結時候 el-table-column 的屬性中需要用** :label** 而不是**label**
      （3）帶冒號的屬性**:prop**表示是vue的來渲染的屬性，不帶冒號的屬性**prop**表示的是常規html的屬性。