VUE 整合element-ui中的table组件

先看一下element官方demo

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          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>

在网上看见大神整理的插件，结合自己用的时候遇到的坑整理一下。
首先创建vue的table组件，mytable.vue

<template>
  <el-table :data="tableData" border>
    <el-table-column v-for="(item,key) in tableKey"
                     :key="key"
                     :prop="item.value"
                     :label="item.name"></el-table-column>
  </el-table>
</template>
<script>
  export default{
    name: 'mytable',
    data(){
      return{
      }
    },
    props:['tableData','tableKey'],
  }
</script>

再页面中调用此组件，可以在main里注册全局组件，也可以注册页面的组件，我这里是在页面中注册组件
页面如下：

<template>
   <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table>
</template>
<script>
    //引用table组件
  import Table from '@/components/mytable';
  export default {
    data () {
      return {
      //配置table数据
        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 弄'
        }],
        //配置table表头
        tableKey: [{
          name: '日期',
          value: 'date'
        },{
          name: '姓名',
          value: 'name'
        },{
          name: '地址',
          value: 'address'
        }]
      }
    },
    //注册table组件
    components: {
      'sl-table': Table
    }
  }
</script>

其他功能可以查看element官方demo