InstantRetailAdmin/src/views/user-management/user-list/index.vue

<script setup lang="tsx">
import { NImage } from 'naive-ui';
import { fetchGetUserList } from '@/service/api/user-management/user-list';
import { useTable } from '@/components/zt/Table/hooks/useTable';

const columns: NaiveUI.TableColumn<Api.userManagement.userList>[] = [
  {
    key: 'nickName',
    title: '用户昵称',
    align: 'center'
  },
  {
    key: 'pic',
    title: '头像',
    align: 'center',
    render: row => <NImage src={row.pic} class="h-[80px] min-w-80px w-[80px]" lazy />
  },
  {
    key: 'userMobile',
    title: '手机号码',
    align: 'center'
  },
  {
    key: 'name',
    title: '渠道',
    align: 'center'
  },
  {
    key: 'userRegtime',
    title: '创建时间',
    align: 'center'
  }
];

const [registerTable] = useTable({
  searchFormConfig: {
    schemas: [
      {
        field: 'nickName',
        label: '用户昵称',
        component: 'NInput'
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'id',
    title: '用户列表',
    showAddButton: false
  }
});
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchGetUserList" :show-table-action="false" @register="registerTable"></ZTable>
  </LayoutTable>
</template>

<style scoped></style>