accompany_admin_pc/src/views/role/pages/Auth.vue

<template>
  <div class="main__container table">
    <header class="table-header">
      <n-input-group style="width:440px">
        <n-input :style="{ width: '50%' }" placeholder="请输入用户名称" v-model="roleName" />
        <n-button strong secondary type="primary">
          搜索
          <template #icon>
            <n-icon>
              <SearchOutline />
            </n-icon>
          </template>
        </n-button>
      </n-input-group>
    </header>
    <main class="table-main" ref="tableMainRef">
      <n-data-table v-if="height" :columns="columns" :data="data" :max-height="`${height}px`"
        :min-height="`${height}px`" />
      <div class="table-main__pagination">
        <n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :page-count="data.length"
          show-size-picker :page-sizes="[10, 20, 30, 40]" />
      </div>
    </main>
  </div>
</template>

<script setup lang='ts'>
import { SearchOutline } from '@vicons/ionicons5';
import { getUserList } from '@/api/roleApi';

const tableMainRef = ref<HTMLElement | null>(null);
const roleName = ref('');
const pagination = reactive<PageController>({
  pageSize: 10,
  page: 1,
});

const columns = [
  {
    title: 'Name',
    key: 'name'
  },
  {
    title: 'Age',
    key: 'age'
  },
  {
    title: 'Address',
    key: 'address'
  }
];
const height = ref(null);
const data = Array.from({ length: 46 }).map((_, index) => ({
  key: index,
  name: `Edward King ${index}`,
  age: 32,
  address: `London, Park Lane no. ${index}`
}));
const init = async () => {
  try {
    const result = await getUserList(pagination);
    console.log(result,'result');
  } catch (error) {
    
  }
}
onMounted(() => {
  if (tableMainRef.value) {
    height.value = tableMainRef.value.clientHeight - 64 - 50; //减去两次内边距 - 分页的大小
  };
  init();
});

</script>
<style scoped lang='scss'>
.table-header {
  background: #fff;
  border-radius: 4px;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 $normolGap;
}

.table-main {
  background: #fff;
  padding: $normolGap;
  border-radius: 4px;
  height: calc(100% - 2 * $normolGap);

  &__pagination {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>