组件代码：
<template><view><uni-table class="tableBox" border stripe emptyText="暂无更多数据" ><!-- 表头行 --><uni-tr class="tableTr"><uni-th align="center" v-for="item in tableDataCloums">{{item.title}}</uni-th></uni-tr><!-- 表格数据行 --><uni-tr v-for="(el,index) in tableDataList"><uni-td align="center" v-if="item.prop !== 'operation'" v-for="item in tableDataCloums">{{getData(item,el,index)}}</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></uni-tr></uni-table><!--分页--><view class="pages"><u-button type="primary" @click="pageChange('pre')">{{'<'+'上一页'}}</u-button><u-button type="primary" @click="pageChange('next')">{{'下一页'+'>'}}</u-button></view></view>
</template>
<script>
export default {props:{tableDataCloums:{type:Array,default:[]},tableDataList:{type:Array,default:[]}},methods: {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>
.pages{display: flex;justify-content: center;padding: torpx(30);.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>页面样子：
