基于Element的Table组件(Form组件)的二次封装

前景：做后台管理几乎每个页面都有Table和Form，不想每次去粘贴复制，所以尝试对Table进行二次封装，实现传入table配置项，直接渲染出对应的Table组件。

核心：此次封装主要利用v-bind传入一个对象的所有 property，实现属性穿透，例如：

const obj = {
   type: 'selection', width: '50' }
<el-table-column v-bind="obj"> </el-table-column>

 //等价于
<el-table-column :type="selection" :width="50"> </el-table-column>

这个在配合v-bind="$attrs"进行一些组件封装时很实用，具体怎么使用可以参考这篇文章【Vue进阶】——如何实现组件属性透传？

最终实现源码：

<template>
    <div class="table">
        <el-table :data="tableData" style="width: 100%">
            <template v-for="(v, i) in tableConfig">
                <!-- self属性用于标记需要做特殊操作的一些列 -->
                <el-table-column v-if="v.self && v.self.body" :key="i" v-bind="v">
                    <template slot-scope="scope">
                        <slot :name="v.self.body" :row="scope.row" :index="scope.$index"></slot>
                    </template>
                </el-table-column>
                <el-table-column v-else :key="i" v-bind="v"> </el-table-column>
            </template>