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" :item-count="data.length"
          show-size-picker :page-sizes="[10, 20, 30, 40]">
          <template #prefix="{ itemCount, startIndex }">
            共 {{ itemCount }} 项
          </template>
        </n-pagination>
      </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('');
const total = ref(0);
const pagination = reactive<PageController>({
  pageSize: 10,
  page: 1,
});
const data = ref([]);
const height = ref(null);

// 类似render - 函数式组件渲染
function createColumns({
  sendMail
}: {
  sendMail: (rowData: UserRaw) => void
}): DataTableColumns<UserRaw> {
  return [
    {
      title: '用户名',
      key: 'userName'
    },
    {
      title: '性别',
      key: 'sex',
      render(row: UserRaw) {
        return h('span', {}, {
          default: () => `${row.sex || '未知'}`
        })
      }
    },
    {
      title: '职位',
      key: 'jobCode',
      render(row: UserRaw) {
        return h('span', {}, {
          default: () => `${row.jobCode || '无职位'}`
        })
      }
    },
    {
      title: '菜单权限',
      key: 'menuName',
      render(row: UserRaw) {
        return h('span', {}, {
          default: () => `${row.menuName || '无权限'}`
        })
      }
    },
    {
      title: '操作',
      key: 'actions',
      render(row: UserRaw) {
        return h(
          NButton,
          {
            size: 'small',
            onClick: () => sendMail(row)
          },
          { default: () => '点击用户' }
        )
      }
    }
  ]
}
// 生成表格列
const columns = createColumns({
  sendMail(rowData) {
    message.error(`我点击了${rowData.userName}`);
  }
})


const init = async () => {
  try {
    const { users, totalCount } = await getUserList({
      ...pagination,
      roleName: roleName.value
    });
    total.value = totalCount;
    data.value = users;
  } 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>