uni-app封装表格组件

组件代码：

<template><view><uni-table class="tableBox" border stripe emptyText=""><!-- 表头行 --><uni-tr class="tableTr"><uni-th :sortable="item.sortable" :class="item.sortable ? 'active':''" @click.native="cloumClick(item)" align="center" v-for="item in tableDataCloums">{{item.title}}</uni-th></uni-tr><!-- 表格数据行 --><uni-tr v-for="(el,index) in tableDataList"><template v-for="item in tableDataCloums"><uni-td align="center" v-if="item.prop !== 'operation'"><view v-if="!Boolean(item.slot)">{{getData(item,el,index)}}</view><component v-else :is="item.slot" :imgSrc="getData(item,el,index)" :rank="el.id"  :text="getData(item,el,index)" :type="filterType(getData(item,el,index))"></component></uni-td><uni-td align="center" v-else><view class="btnBox"><u-button v-for="operationItem in getData(item,el,index)" @click="operationItemClick(operationItem,el)" :type="operationItem.type" :text="operationItem.text"></u-button></view></uni-td></template></uni-tr></uni-table><u-empty v-if="tableDataList.length === 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"/><!--分页--><view class="pages" v-if="showPages && tableDataList.length !== 0"><u-button type="primary" @click="pageChange('pre')">{{'<'+'上一页'}}</u-button><u-button type="primary" @click="pageChange('next')">{{'下一页'+'>'}}</u-button></view></view>
</template>
<script>
import tags from './components/tags.vue'
import imgBox from './components/imgBox.vue'
import rank from './components/rank.vue'
export default {components:{tags,imgBox,rank},props:{tableDataCloums:{type:Array,default:[]},tableDataList:{type:Array,default:[]},showPages:{type:Boolean,default:true}},data(){return{warningArr:['退款中'],errorArr:['未支付','拒绝退款','已结账'],successArr:['已退款','已支付']}},methods: {cloumClick(item){if(item.fun){this.$emit(item.fun)}},filterType(text){if(this.warningArr.includes(text)){return 'warning'}else if(this.errorArr.includes(text)){return 'error'}else{return 'success'}},pageChange(type){this.$emit('pageNumChange',type)},operationItemClick(operationItem,el){this.$emit(operationItem.fun,el)},getData(item,el,index){if(item.prop == 'operation'){return item.operation}return el[item.prop]}},
}
</script>
<style lang="scss" scoped>
.active{color: #1354E0 !important;
}
.pages{display: flex;justify-content: center;.u-button{margin: torpx(30);width: 30%;}
}
.table--border{border: none;
}
.tableTr{background: #DAE3F5;
}
.uni-table-th{font-size: torpx(24);color: #212121;
}
.uni-table-td{font-size: torpx(20);
}
.btnBox{display: flex;.u-button{margin: 0 torpx(10);}
}
</style>

组件使用代码:

const tableDataCloums = [{title:'会员卡编号',prop:'id'},{title:'会员电话',prop:'phone'},{title:'会员等级',prop:'vipGrade'},{title:'会员昵称',prop:'nickName'},{title:'当前积分',prop:'pointsCurrent'},{title:'等级权益',prop:'pointsCurrent'},{title:'余额',prop:'pointsCurrent'},{title:'开卡时间',prop:'createTime'},{title:'最近下单',prop:'updateTime'},{title:'操作',prop:'operation',operation:[{text:'充值',fun:'recharge',type:'primary'},{text:'充值记录',fun:'record',type:'warning'}]},
]<comsTable :tableDataCloums="balanceTableDataCloums" :tableDataList="balanceTableDataList"></comsTable>

页面样子：