vue中创建表格组件及其调用

1、表格组件
<template>
  <div>
    <el-table :data="tableData" boder>
      <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.name" :label="item.value" :width="item.width"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'table',
  props: ['tableData', 'tableKey'],
  data () {
    return {
    }
  }
}
</script>
2、调用组件
<template>
  <div>
    <h1>表格测试4</h1>
    <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table>
  </div>
</template>

<script>
import Table from '@/components/table/table4s'
export default {
  components: {
    'sl-table': Table
  },
  data () {
    return {
      tableKey: [{
        name: 'date',
        value: '日期',
        width: 100
      }, {
        name: 'name',
        value: '姓名',
        width: 100
      }, {
        name: 'address',
        value: '地址',
        width: 250
      }],
      tableData: [{
        date: '2019-06-02',
        name: '张三喜',
        address: '上海市普陀区金沙江路1518弄'
      }, {
        date: '2019-06-04',
        name: '李四愁',
        address: '北京朝阳区昆明路1517号'
      }, {
        date: '2019-05-01',
        name: '王麻子',
        address: '广州市越秀区南京路1519号'
      }, {
        date: '2019-05-03',
        name: '赵小六',
        address: '深圳市福田区深南大道1519号'
      }]
    }
  }
}
</script>