uni-app封装表格组件_uniapp table组件

组件代码：

<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>

页面样子：

加入了动态组件，需要在tableDataCloums传值中添加slot属性，我在项目中使用到了三个动态组件，页面展示

1.tags动态组件是对应的支付状态

2.imgBox对应的是图片

3.rank组件对应的排名

在报表和这个页面也可以看出来表格是可以排序的只要在tableDataCloums中传sorttable:true，即有排序样式，当然排序逻辑需要自己写，也可以看我之前的博客