餓了么的table組件功能很強大，對于項目中的各種表格基本夠用，但是……個人對于它以列為單位的操作不習慣 =。=所以改成了另一種方式（我不會告訴你其實本質沒變）。

項目中表格較多，所以復用性最重要

步驟一

先來個基本的表格展示

官例的tableData

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

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

步驟二

簡化一下表格：

//table.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: 'table', data(){  return{   tableData:[...],   tableKey: [{    name: 'date',    value: '日期'   },{    name: '姓名',    value: 'name'   },{    name: '地址',    value: 'address'   }]  } }}</script>

步驟三

復用table.vue就是————給它數據的同時告訴它我的字段名唄

新建一個父組件sl_table.vue

//sl_table.vue<template> <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table></template><script>import Table from '@/components/table'export default{ name: 'sl-table', data(){  return {   tableData: [...]   tableKey: [{    name: 'date',    value: '日期'   },{    name: '姓名',    value: 'name'   },{    name: '地址',    value: 'address'   }]  } }, components: {  'sl-table': Table }}</script>

table.vue就更簡單了

//table.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: 'table', data(){  return{     } }, props:['tableData','tableKey'],}</script>

步驟四

可以根據需求修改table的形式

列寬度

這個較為簡單，可以直接加個屬性

//sl_table.vue... data(){  return {   tableData: [...]   tableKey: [{    name: 'date',    value: '日期',    width: 80   },{    name: '姓名',    value: 'name',    width: 80   },{    name: '地址',    value: 'address'   }]  } },...