parking_operation/components/tableRanking.vue

<!-- 表格 -->
<template>
  <view class="container">
    <view class="table" :style="{ padding: padding }">
      <view class="table-title" v-if="title">{{ title }}</view>
      <view class="table-box">
        <uni-table emptyText="暂无更多数据" :loading="loading">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th
              class="table-box-th"
              align="center"
              v-for="(item, index) in tableTh"
              :key="index"
              :width="item.width || ''"
            >{{ item.field }}</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item, index) in tableData.list" :key="index">
            <uni-td
              class="table-box-td"
              align="center"
              v-for="(field, index) in tableTh"
              :key="index"
            >{{ item[field.key] || item[field.key] === 0 ? item[field.key] : '-' }}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
      <view class="table-pagination" v-if="tableData.total > 0">
        <uni-pagination
          show-icon="true"
          :total="tableData.total"
          :current="tableData.current"
          @change="pageChange"
        ></uni-pagination>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    padding: {
      type: String,
      default: '15px'
    },
    tableTh: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableData: {
      type: Object,
      default: () => {
        return {
          current: 1,
          total: 0,
          list: []
        };
      }
    }
  },
  methods: {
    pageChange(e) {
      this.$emit('pageChange', e.current);
    }
  }
};
</script>
/**
 * tableTh
 * [{ width: '', field: '', key: '' }]   width表示单列的宽度  field表示单列的表头名称  key表示单列字段名
 */

<style lang="scss" scoped>
@import 'static/styles/report.scss';
</style>