git clone https://github.com/wardendon/geek-admin-thin.git

<!-- 表格操作 -->
<el-button v-hasPermi="['sys:manager:view']" type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
<el-button v-hasPermi="['sys:manager:edit']" type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
<el-button v-hasPermi="['sys:manager:reset-psw']" type="warning" link :icon="EditPen" @click="openDrawer('重置', scope.row)">重置密码</el-button>
<el-button v-hasPermi="['sys:manager:remove']" type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>

<template>
  <div class="table-box">
    <ProTable
      rowKey="pkId"
      ref="proTable"
      :columns="columns"
      :requestApi="getTableList"
      :dataCallback="dataCallback"
      :cell-style="{ padding: '0px' }"
    >
    </ProTable>
  </div>
</template>
<script setup lang="tsx">
import { ref, reactive } from 'vue'
import { ColumnProps } from '@/components/ProTable/interface'
import ProTable from '@/components/ProTable/index.vue'
import { View } from '@element-plus/icons-vue'
// ...省略import
// 获取 ProTable 元素，调用其暴露的方法（如获取刷新数据方法，还能获取到当前查询参数）
const proTable = ref()

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total
  }
}
// 若无需修改 params 就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  return UserApi.page(params)
}

// 表格配置项
const columns: ColumnProps<UserType>[] = [
  { type: 'selection', fixed: 'left', width: 60 },
  {
    prop: 'avatar',
    label: '头像',
    width: 70,
    // 自定义单元格内容渲染（tsx语法）
    render: (scope) => {
      return (
        <div class={['flex', 'justify-center', 'p-1']}>
          <el-avatar shape={'square'} size={30} src={scope.row.avatar} />
        </div>
      )
    }
  },
  { prop: 'account', label: '账号' },
  {
    prop: 'gender',
    label: '性别',
    sortable: true,
    enum: [
      {
        genderLabel: '男',
        genderValue: 0
      },
      {
        genderLabel: '女',
        genderValue: 1
      }
    ],
    search: { el: 'select', props: { filterable: true } },
    fieldNames: { label: 'genderLabel', value: 'genderValue' },
    render: (scope) => {
      let type = scope.row.gender === 0 ? 'success' : 'warning'
      return <el-tag type={type}>{scope.row.gender === 0 ? '男' : '女'}</el-tag>
    }
  },
  {
    prop: 'date',
    label: '日期',
    search: {
      el: 'date-picker',
      props: { type: 'datetime', format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD', placeholder: '请选择日期' }
    }
  },
  { prop: 'operation', label: '操作', fixed: 'right', width: 340 }
]
</script>

<template>
  <div class="table-box">
    <ProTable>
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="success" :icon="CirclePlus" plain @click="openDrawer('新增')">新增</el-button>
        <el-button type="primary" :icon="Download" plain @click="downloadFile">导出</el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('编辑', scope.row)">编辑</el-button>
      </template>
    </ProTable>
  </div>
</template>
<script setup lang="tsx">
import { Download, View, CirclePlus } from '@element-plus/icons-vue'
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<UserType> = {}) => {
  //...关于打开抽屉或者模态框，仿照管理员管理写就行了，或者根据geeker-admin源码进行仿写。
}
// 导出列表
const downloadFile = async () => {
  //...
}
</script>