vue Cli ElementUi封装Table表格加分页组件，使用render渲染函数提升组件复用性

Vue cli二次封装Element Ui的Table表格加分页组件，使用render渲染函数提升组件复用性；
因为项目每个页面都需要Table表格和分页，所以就想着把表格和分页封装成组件，废话少说直接上干货：
Table组件内容：
新建commonTable.vue文件(直接全部复制，组件引用自己去看全局引用组件)：

<template>
    <div>
        <el-table :data="tableData" size="medium" fit
                  :header-cell-style="{height: '40px',padding: '0',background: '#f7f9fa','font-size': '12px',color: '#8590a6'}"
                  :row-style="{'font-size': '12px',color: '#212121'}"
                  ref="multipleTable" border>
            <el-table-column v-for="(item, key) in tableHeader"
                             :key="key"
                             :prop="item.prop"
                             :label="item.label"
                             :fixed="item.fixed"
                             :min-width="item.minWidth" align="center">
                <template slot-scope="scope">
                    <ex-slot v-if="item.render" :render="item.render" :row="scope.row"
                             :index="scope.$index" :column="item"/>
                    <span v-else>{{ scope.row[item.prop] || '-' }}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="text-align: center;margin:20px 0;"
            :current-page="pager.pageNo"
            :page-size="pager.limit"
            :page-sizes="pager.sizes"
            :total="pager.total"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>

</template>

<script>
    // 自定义内容的组件
    var exSlot = {
        functional: true,
        props: {
            row: Object,
            render: Function,
            index: Number,
            column: {
                type: Object,
                default: null
            }
        },
        render: (h, data) => {
            const params = {
                row: data.props.row,
                index: data.props.index
            }
            if (data.props.column) {
                params.column = data.props.column
            }
            return data.props.render(h, params)
        }
    }
    export default {
        name: 'comp-table',
        components: {exSlot},
        props: {
            // 表格数据
            tableData: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // 分页数据
            pager: Object,
            // 表头数据
            tableHeader: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        methods: {

            /**
             * @description 点击分页切换时触发
             * @param {Object} -val 传给父组件当前的页码对象
             */
            handleCurrentChange(val) {
                this.$emit('handleCurrentChange', val);
            },

            /**
             * @description 更改一页展示多少条数据时触发
             * @param {Object} -val 传给父组件当前设置的每页展示多少条数据
             */
            handleSizeChange(val) {
                this.$emit('handleSizeChange', val);
            },
        }
    }
</script>

父组件内容：

<template>
    <div id="journal">
        <div class="goods-title">
            <span>日志</span>
        </div>
        <div class="journalTable">
            <commonTable
                :tableHeader="tableHeader"
                :tableData="tableData"
                :pager="page"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
            >
            </commonTable>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 表格数据
                tableData: [],
                // 列属性
                // 表头信息，可根据minWidth修改宽度
                tableHeader: [
                    {prop: 'date', label: '时间', minWidth: '160px'},
                    {
                        prop: 'name',
                        label: '操作人',
                        minWidth: '75px'
                    },
                    {
                        prop: 'source',
                        label: '图片',
                        minWidth: '90px',
                        render: (h, params) => {
                            let row = params.row;
                            return h('img', {
                                style: {
                                    height: "80px",
                                    verticalAlign: "middle"
                                },
                                attrs: {
                                    src: row.imgUrl
                                }
                            })
                        }
                    },
                    {
                        prop:'status',
                        label: '是否操作',
                        minWidth: '100px',
                        render:(h,params)=>{
                            let value = null;
                            switch (params.row.status) {
                                case 1:
                                    value='是';
                                    break;
                                case 2:
                                    value='否';
                                    break;
                                case 3:
                                    value='不清楚';
                                    break;
                            }
                            return h('span',value);
                        }
                    },
                    {
                        prop: 'button',
                        label: '操作',
                        minWidth: '200px',
                        render: (h, params) => {
                            return h('div', [
                                h('el-button', {
                                    //给button绑定value属性
                                    props: {
                                        type: 'primary',
                                        size: "small"
                                    },
                                    // DOM 属性
                                    domProps: {
                                        innerHTML: '编辑'
                                    },
                                    //给button绑定样式
                                    style: {
                                        // width: '30px'
                                    },
                                    //给button绑定点击事件
                                    on: {
                                        click: () => {
                                            this.editDomain(params.row);
                                        }
                                    },
                                }),
                                h('el-button', {
                                    //给button绑定value属性
                                    props: {
                                        type: 'danger',
                                        size: "small"
                                    },
                                    // DOM 属性
                                    domProps: {
                                        innerHTML: '删除'
                                    },
                                    //给button绑定样式
                                    style: {
                                        // width: '30px'
                                    },
                                    //给button绑定点击事件
                                    on: {
                                        click: () => {
                                            this.delField(params.row);
                                        }
                                    },
                                })
                            ])
                        },
                    }
                ],
                // 分页
                page: {
                    pageNo: 1,
                    limit: 10,
                    sizes: [10, 50, 100],
                    total: 0
                }
            }
        },
        mounted() {
            // 模拟初始化数据
            this.tableData = [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '修改了密码',
                    status: 1,
                    imgUrl: require('@/assets/images/404.png'),
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '退出了登录',
                    status: 1,
                    imgUrl: require('@/assets/images/404.png'),
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '查看日志',
                    status: 2,
                    imgUrl: require('@/assets/images/404.png'),
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '编辑了信息',
                    status: 3,
                    imgUrl: require('@/assets/images/404.png'),
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '修改了密码',
                    status: 1,
                    imgUrl: require('@/assets/images/404.png'),
                },
            ];
            // 分页总条数获取数据数组的总数
            this.page.total = this.tableData.length;
        },
        methods: {
           
            /**
             * @description 改变页面展示多少条数据时执行
             * @param {Object} -val
             */
            handleSizeChange(val) {

            },
            /**
             * @description 点击翻页时执行
             * @param {Object} -val
             */
            handleCurrentChange(val) {

            },
            /**
             * @description 点击编辑更改本条数据信息
             * @param {Object} -row 拿到本条信息的所有数据对象
             */
            editDomain(row) {
                console.log(row)
                console.log('我点击了编辑')
            },
            /**
             * @description 点击删除执行删除本条数据
             * @param {Object} -row 拿到本条信息的所有数据对象
             */
            delField(row) {
                console.log(row);
                console.log('我点击了删除')
            },

        }
    }
</script>

<style scoped lang="scss">
    .journalTable {
        padding: 20px;
    }
</style>

直接复制过去全部都可以用，组件引用是在components下index.js全局引用的（自己百度）；
父组件例子中已经把多种情况写明白：按钮，多状态判断，图片，其它如果需要添加别的东西，请百度查看render渲染函数；

真不容易！！！！！！！！点个赞吧！