element-ui中的el-table二次封装

element-ui中的el-table二次封装

element-ui这个ui框架现在越来越火，很多公司都在使用它。可以节省很多代码，节省开发时间。此次对el-table组件进行干次封装(vue),费话不多说，直接上代码：

<template>
    <div class="table-box">
        <el-table border :data="tableData" @selection-change="changeSelection">
            <slot name="expand"></slot>
            <template v-for="(item, index) in tableColumn" >
                <!-- 索引列 -->
                <el-table-column v-if="item.prop=='index'" :key="'%'+index" type="index" :label="item.label" :width="item.width" :align="item.align"/>
                <!-- 选择列 -->
                <el-table-column v-else-if="item.prop=='selection'" :key="'%'+index" type="selection" :width="item.width" :align="item.align"/>
                <!-- 此列需要自定义 -->
                <el-table-column v-else-if="item.slot" :key="'%'+index" :prop="item.prop" :label="item.label"  :width="item.width" :align="item.align">
                    <template slot-scope="{row}">
                        <slot :name="item.prop" :row="row"></slot>
                    </template>
                </el-table-column>
                <!-- 正常列 -->
                <el-table-column v-else :key="'%'+index" :show-overflow-tooltip="item.showTooltip" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align">
                    <template slot-scope="{row}">
                        <!-- 操作列 -->
                        <template v-if="item.btnButton">
                            <el-button v-for="(value, i) in item.btnButton" :key="'$'+i" :type="value.type" :icon="value.icon" @click="value.callback(row)">{{ value.text }}</el-button>
                        </template>
                        <!-- 直接展示列 -->
                        <template v-else>
                            {{ row[item.prop] }}
                        </template>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <!-- 分页 -->
        <div style="display: flex; justify-content: flex-end;align-item:center;">
          <el-pagination
            style="margin-top: 10px; margin-right: 0"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginationData.total"
            @current-change="changeIndexOrPage"
            @size-change="changeIndexOrPage"
            :current-page.sync="paginationData.pageIndex"
            :page-size.sync="paginationData.pageSize"
            :page-sizes="[5, 10, 15, 20]"
          >
          </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        // 分页数据
        paginationData:{
            type:Object,
            default:()=>{}
        },
        // 表格数据
        tableData:{
            type:Array,
            default:()=>[]
        },
        // 表格展示数据
        tableColumn:{
            type:Array,
            default:()=>[]
        }
    },
    methods: {
        // 改变选中行的回调
        changeSelection(val){
            this.$emit('changeSelection',val)
        },
        // 改变页码或者数量
        changeIndexOrPage(){
            this.$emit('changeIndexOrPage')
        },
    },

}
</script>
<style lang="less" scoped>
.table-box{
    display: flex;
    flex-direction: column;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}
</style>

然后在需要的页面导入就可以了，很简单