wechat-ui/src/views/dashboard/workbench/components/TableList.vue

<template>
  <section class="section">
    <div class="title">{{ title }}</div>
    <Table
      class="table"
      size="small"
      :columns="columns"
      :data-source="data"
      :pagination="{
        hideOnSinglePage: true,
        current: currentPage,
        pageSize: 7,
        onChange: (page) => (currentPage = page),
      }"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'interaction_rate'">{{ text }}%</template>
      </template>
    </Table>
  </section>
</template>
<script setup lang="ts">
  import { ref, watchEffect } from 'vue';
  import { Table } from 'ant-design-vue';

  const { title, columns, data } = defineProps<{
    title: string;
    columns: object[];
    data: object[];
  }>();

  const currentPage = ref(1);

  watchEffect(() => {
    currentPage.value = 1;
  });
</script>
<style lang="scss" scoped>
  .section {
    min-height: 432px;
    padding: 18px;
    padding-bottom: 14px;
    background-color: #fff;


    .title {
      font-size: 18px;
      font-weight: bold;
    }

    .table {
      width: 100%;
      margin-top: 12px;
    }
  }
</style>