vue基于ElementUI二次封装Table+分页

话不多说直接上代码，首先我们先封装el-table组件，里面的item都是日常用到的基本el-table-column，对于复杂的el-table-column 我们可以定义插槽进行自定义扩展

// SimpleTable

具体如何使用呢，我这里也把几个场景的代码贴出来，

首先先引入并注册组件，这里贴上template中使用的代码

这是date里的数据，type:'selection' 是表单多选checkbox，formatter是定义每列数据的格式化，

slot则是定义的具名插槽，这里的name:"action"要和上面的slot="action"保持一致

tableData:[],
columns:[
    { type:'selection'},
    { type:'index'},
    { type:'text',key:'cardNo',label:'卡号'},
    { type:'text',key:'batchId',label:'批次号'},
    { type:'text',key:'firstSubjectName',label:'合作机构名称'},
    { type:'text',key:'cardStatus',label:'会员卡状态',formatter:this.cellFormatter},
    { type:'text',key:'cardType',label:'会员卡类型',formatter:this.cellFormatter},
    { type:'text',key:'durationDays',label:'可用时间（天）'},
    { type:'text',key:'qrCodeGenerated',label:'二维码生成',formatter:this.cellFormatter},
    { type:'date',key:'lastActivityTime',label:'最后激活时间'},
    { type:'slot',name:"action"}
]
pagination: {
    current: 1,
    size: 10,
    total: 1,
},

这里是methods代码

// 根据列的值动态显示样式 仅为示例，具体根据自身业务更改
rowClass(col){
    if(col.column.property === 'qrCodeGenerated'){
        return col.row.qrCodeGenerated === 'NO' ? 'color-danger' : 'color-success'
    }
},
// 每列对应需要格式化的内容
cellFormatter(row, column, cellValue, index){
    let showLabel =''
    if(column.property === 'cardStatus'){
        this.cardStatus.forEach(x=>{
            if(x.value === cellValue){
               showLabel= x.label 
            }
        })
    }
    ……
    if(column.property === 'qrCodeGenerated'){
        showLabel= cellValue === 'YES'? '是':'否' 
    }
    return showLabel || '-'
},

至此二次封装的table就可以愉快的使用了，有什么问题给我留言吧...