parking_operation/components/tableRanking.vue

<!-- 表格 -->
<template>
  <view>
    <template v-if="isScroll">
      <movable-area scale-area>
        <movable-view y="10" style="height: 10px" direction="horizontal" scale scale-min="1" scale-max="4">
          <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">
                  <!-- 表头行 -->
                  <view class="tableHead">
                    <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>
                  </view>
                  <!-- 表格数据行 -->
                  <view class="tableBody">
                    <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" :width="field.width || ''">{{
                        item[field.key] || item[field.key] === 0 ? item[field.key] : '-'
                      }}</uni-td>
                    </uni-tr>
                  </view>
                </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>
        </movable-view> </movable-area
    ></template>
    <template v-else>
      <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" :width="field.width || ''">{{
                  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>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    padding: {
      type: String,
      default: '15px'
    },
    isScroll: {
      type: Boolean,
      default: false
    },
    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>
movable-view {
  display: flex;
  width: auto;
  height: auto;
  min-width: 100%;
}
movable-area {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: scroll;
}
.tableHead {
  font-weight: bold;
  color: #333333;
  background: #f4f6ff;
  z-index: 20;
  position: fixed;
  top: 0;
}
.tableBody {
  max-height: calc(100vh - 254px);
  overflow: scroll;
  margin-top: 60px;
}
@import 'static/styles/report.scss';
</style>