对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>

 

 

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