vue 二次封装ElementUI table表格组件

目录

前言：

父组件如何使用AppTable：

AppTable组件代码：

---

前言：

很多业务中有类似表格的操作，尤其是类似后台操作的业务产品等更需要将表格封装起来，以此减轻代码工作量提升开发效率，而且还能统一修改表格样式等等。

这里以ElementUI组件库为前提封装

如图所示：

这里二次封装的el-table组件名为AppTable

父组件如何使用AppTable：

tableData -- 表格数据，通过接口拿到值。类型为Array

tableColumns -- 表格的列，需要在data中组装定义完成。类型为Array

onClickButton -- 操作按钮执行的方法，子组件的回调，在methods中定义

pagination -- 分页需要的参数

handlerPaging -- 监听分页的方法，在methods中定义

//父组件
<template>
    <div class="page-main-style">
        
        <div class="content-wrap">
            
            <AppTable 
            :tableData="tableData" 
            :tableColumns="tableColumns" 
            @onClickButton="onClickButton" 
            :pagination.sync="pagination" 
            @handlerPaging="handlerPaging"></AppTable>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
           
            tableData: [],
            tableColumns: [
                {
                    label: '订单编号',
                    prop:'stockId',
                },
                {
                    label: '运单号',
                    prop:'trackNo',
                },
                {
                    label: '物流公司',
                    prop:'logisticsCompany',
                },
              
                {
                    label: '状态',
                    prop:'status',
                    formatter: this.formatterStatus
                },
                {
                    label: '操作',
                    width: '200',
                    fixed: 'right',
                    options: [
                        {
                            label: '填写',
                            pcode: 'kernel_logistics_save', // 按钮的权限
                            methods: {fun:'handleClickDetail', name: 'add'},
                            render(row){ //