封装element中的table表格，实现可控并动态渲染（动态表头）

• 在使用vue+element做管理系统的时候，使用到了element中的表格，但是element的表格只需要传递进去数据，然后写死表头即可渲染。
• 但是在追求组件化开发的vue项目中，特别是有很多表格的管理系统的时候，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。
• 真的需求是在需要table的组件中引入同一个table即可，而table通过父组件传递数据来动态渲染。上一节实现了动态渲染，但是无法操作指定的列，难免有时候会在表格中点击某一列操作数据，而element table提供了每个单元格点击事件，不符合要求，所以下面对element table做了简单的封装，可以完美实现可复用、可定制、动态渲染的表格。

子组件中的table封装，并接受父组件传递过来的数据

<el-table 
    :data="this.tableData"
    height="400px" 
    max-height="400px" 
    size="small"
    row-class-name="row"
    cell-class-name="column"
    :row-style="setRowStyle"
    :cell-style="setColumnStyle"
    :highlight-current-row="true"
    fit
    >
    <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index" 
        :prop="item.prop" 
        :width="item.width" 
        :label="item.label">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleGoods(scope.row)" v-if="item.isOpera">{{scope.row[item.prop]}}</el-button>
            <div v-else>{{scope.row[item.prop]}}</div> 
        </template>
    </el-table-column>
</el-table>

props: {
     tableData: {
         type: Array,
         default: []
     },
     tableLabel: {
         type: Array,
         default: () => {
             return []
         }
     }
 }

父组件中向子组件传递table数据和表头数据，并设定自定义可操作列

<router-table :tableData="tableData" :tableLabel="tableLabel"></router-table>

import RouterTable from '../../../../components/homeRouter/RouterTable'

components: {
	RouterTable
},
data() {
	return {
		tableLabel: [
                      {label: '', width: '40', prop: 'id'},
                      {label: '农户名称', width: '', prop: 'name', isOpera: true},
                      {label: '所属中心店', width: '', prop: 'shop', isOpera: true},
					  {label: '性别', width: '', prop: 'sex'},
					  {label: '电话', width: '', prop: 'phone'},
                      {label: '所在地区', width: '', prop: 'area'},
					  {label: '土地面积(亩)', width: '', prop: 'acreage'},
					  {label: '累计购买数量(T)', width: '', prop: 'quantity'},
                      {label: '累计购买金额(元)', width: '', prop: 'money'},
                      {label: '是否管理端添加', width: '', prop: 'add'},
              ],
		tableData: [
                   {
                       id: 1,
                       name: '中国男',
                       shop: '阳光超市',
                       sex: '男',
                       phone: 18383929383,
                       area: '华北',
                       acreage: 90,
                       quantity: 444,
                       money: 34534,
                       add: '是'
                   },
                   {
                       id: 2,
                       name: 'ADS',
                       shop: 'sd',
                       sex: 's',
                       phone: 18383929383,
                       area: '华北',
                       acreage: 90,
                       quantity: 444,
                       money: 34534,
                       add: '是'
                   }
               ]
	}
}