对element-ui的table组件的二次封装

首先，使用过element-ui的table组建的同学都知道，每次使用的时候表头字段都要一个一个的去写，写起来很麻烦，既不美观又浪费时间，基于以上原因，对table组件进行二次封装，使我们在使用的时候更加简单方便。

这里只是简单的封装，同学们若是感兴趣可以加以完善，若有问题可以一起讨论。

//封装的table组件
<template>
    <!-- 列表 -->
    <el-table
        stripe
        :border="border"
        :data="dataSource" 
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        @row-dblclick="rowClick"
        highlight-current-row
        @row-click="clickTable"
        ref="refTable"
        @expand-change="expandChange"
    >
      <!--数据源-->
      <el-table-column 
        v-for="(column, index) in columns"
        header-align="center" 
        v-if="column.isShow" 
        :sortable="column.hasSort"
        :key="column.prop"
        :prop="column.prop" 
        :label="column.label" 
        :align="column.align"
        :width="column.width">
      </el-table-column >
    </el-table>
</template>
<script>
    export default {
        name:"tables",
        props:{
            dataSource: {// 表格数据源 默认为空数组
                type: Array,
                default: ()=> []
            },
            columns: {// 表格的字段展示 默认为空数组
                type: Array,
                default: ()=>[]
            }
        },
        components: {
            //
        },
        watch:{
           //
        },
        mounted(){
            //
        },
        methods: {
            //
        }
    }
</script>
<style lang="scss">
//
</style>

封装完成后怎么调用这个组件呢？

//调用封装好的table组件
<template>
    //这里仅传入列表数据和表头数据，如有其它需求可以增加传递参数
    <tables  :dataSource="dataSource" :columns="columns"></tables>
</template>
<script>
    import tables from \'./table.vue\' //引入组件
    export default {
        data() {
            return {
                dataSource:[{
                    \'createTime\':123,
                    \'times\':123,
                    \'username\':\'jj\',
                    \'deptName\':\'ii\',
                    \'status\':\'0\',
                },{
                    \'createTime\':123,
                    \'times\':123,
                    \'username\':\'jj\',
                    \'deptName\':\'ii\',
                    \'status\':\'0\',
                },{
                    \'createTime\':123,
                    \'times\':123,
                    \'username\':\'jj\',
                    \'deptName\':\'ii\',
                    \'status\':\'0\',
                }],
                columns:[{
                        hasSort: false, //<Boolean> 是否排序
                        isShow: true, //<Boolean> 是否展示
                        prop: \'createTime\', //<String>  对应属性名
                        label: \'日期\', //<String>   表头标签
                        align: \'center\',//表头内容是否居中
                        width: 200, // 列宽
                    },{
                        hasSort: false, //<Boolean> 是否排序
                        isShow: true, //<Boolean> 是否展示
                        prop: \'times\', //<String>  对应属性名
                        label: \'时间\', //<String>   表头标签
                        align: \'center\'//表头内容是否居中
                    },{
                        hasSort: true, //<Boolean> 是否排序
                        isShow: true, //<Boolean> 是否展示
                        prop: \'username\', //<String>  对应属性名
                        label: \'名字\', //<String>   表头标签
                        align: \'center\'//表头内容是否居中
                    },{
                        hasSort: true, //<Boolean> 是否排序
                        isShow: true, //<Boolean> 是否展示
                        prop: \'deptName\', //<String>  对应属性名
                        label: \'部门名称\', //<String>   表头标签
                        align: \'center\'//表头内容是否居中
                    },{
                        hasSort: true, //<Boolean> 是否排序
                        isShow: true, //<Boolean> 是否展示
                        prop: \'status\', //<String>  对应属性名
                        label: \'状态\', //<String>   表头标签
                        align: \'center\'//表头内容是否居中
                    }
                ]
            }
        },
        components: {
            tables,//注册table组件
        },
        watch:{
           //
        },
        mounted(){
            //
        },
        methods: {
            //
        }
    }
</script>
<style lang="scss">
//
</style>

 

 

下面是我的公众号二维码，欢迎同学们关注，大家一起学习，一起进步。