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:value="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';
import { DataTableColumns, NButton, useMessage } from 'naive-ui';

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

// 列接口数据
interface RowData {
  name: string
  sex: 'female' | 'male' | 'unknown',
  address: string
}
// 类似render - 函数式组件渲染
function createColumns({
  sendMail
}: {
  sendMail: (rowData: RowData) => void
}): DataTableColumns<RowData> {
  return [
    {
      title: '用户名',
      key: 'name'
    },
    {
      title: '性别',
      key: 'sex'
    },
    {
      title: 'Address',
      key: 'address'
    },
    {
      title: 'Action',
      key: 'actions',
      render(row) {
        return h(
          NButton,
          {
            size: 'small',
            onClick: () => sendMail(row)
          },
          { default: () => 'Send Email' }
        )
      }
    }
  ]
}
// 生成表格列
const columns = createColumns({
  sendMail(rowData) {
    message.error(`我点击了${rowData.name}`);
  }
})
const height = ref(null);
const data = Array.from({ length: 10 }).map((_, index) => ({
  key: index,
  name: `Edward King ${index}`,
  sex: 'female',
  address: `London, Park Lane no. ${index}`
}));
const init = async () => {
  try {
    const result = await getUserList({
      ...pagination,
      roleName: roleName.value
    });
    console.log(result, 'result');
  } catch (error) {
    message.error(error.message);
  }
}
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>