簡單El-Table封裝（一）

簡單封裝提起出列和數據

Compoents文件夾下加個 VTable.vue 文件，內容如下

<template>
   <el-table :data="tableData" style="width: 100%">
      <el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :key="item.prop" ></el-table-column>
    </el-table>
</template>

<script>
export default {
    name:"VTable",
    props:{
      //接收列
      columns:{
        type:Array,
        default:()=>[]
      },
      //接收數據
      tableData:{
        type:Array,
        default:()=>[]
      }
    },
    data() {
        return {
        }
      }
}
</script>
<style>
</style>

在home.vue頁面中使用

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
     <VTable :columns="columns" :tableData="tableData"></VTable>
  </div>
</template>

<script>
// @ is an alias to /src
import VTable from '@/components/VTable.vue'

export default {
  name: 'Home',
  data(){
    return{
	   //列數據
      columns:[
          {label:"日期",prop:"date"},
          {label:"姓名",prop:"name"},
          {label:"地址",prop:"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 弄'
        }]
    }
  },
  components: {
     VTable
  }
}
</script>

簡單的分裝到此結束