代码如下：

<template>
  <div class="user_manage">
    <!--配置prop：api方法能用,比如重置，校验-->
    <div class="query-form">
      <el-form :inline="true" ref="queryForm" :model="userQuery">
        <el-form-item prop="userId" label="用户ID">
          <el-input v-model="userQuery.userId" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item prop="userName" label="用户名称">
          <el-input v-model="userQuery.userName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item prop="state" label="状态">
          <el-select v-model="userQuery.state">
            <el-option :value="0" label="所有"></el-option>
            <el-option :value="1" label="在职"></el-option>
            <el-option :value="2" label="离职"></el-option>
            <el-option :value="3" label="试用期"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFind">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary">新增</el-button>
        <el-button type="danger" @click="handlePatchDel">批量删除</el-button>
      </div>
      <el-table :data="userList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" size="mini"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="handleDelte(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :current-page="pager.pageNum"
        :total="pager.total"
        :page-size="pager.pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { reactive, watchEffect, ref, getCurrentInstance } from "vue";

const userEffect = (proxy) => {
  //初始化用户表单对象
  let userQuery = reactive({
    userId: "",
    userName: "",
    state: 1,
  });
  //用户列表数据
  const userList = ref([]);
  //初始化分页对象
  const pager = reactive({
    pageNum: 1,
    pageSize: 10,
  });
  //选中列表
  const checkedUserIds = ref([]);
  //请求加载用户列表
  const getUserList = async () => {
    let params = { ...userQuery, ...pager };
    const data = await proxy.$api.getUserList(params);
    const { list, page } = data;
    userList.value = list;
    pager.total = page.total;
  };
  //定义点击
  const handleClick = (row) => {
    console.log(row);
    row.userId = "10002";
  };
  //查询，获取用户列表
  const handleFind = () => {
    getUserList();
  };
  //重置查询
  const handleReset = () => {
    proxy.$refs.queryForm.resetFields();
  };
  //用户单个删除
  const handleDelte = async (row) => {
    await proxy.$api.oneUserDelete({ userIds: [row.userId] }); //删除
    proxy.$msg.success({
      //提示
      message: "删除成功",
      duration: 1000,
    });
    getUserList(); //更新user列表
  };
  //用户批量删除
  const handlePatchDel = async () => {
    if (checkedUserIds.value.length === 0) {
      proxy.$msg.error({
        message: "请选择要删除的用户",
        duration: 1000,
      });
      return;
    }
    console.log(checkedUserIds.value);
    const res = await proxy.$api.oneUserDelete({
      userIds: checkedUserIds.value,
    }); //删除
    if (res.nModified > 0) {
      proxy.$msg.success({
        //提示
        message: "删除成功",
        duration: 1000,
      });
      getUserList(); //更新user列表
    } else {
      proxy.$msg.error({
        message: "删除失败",
        duration: 1000,
      });
    }
  };
  //选中当前行
  const handleSelectionChange = (checkList) => {
    //遍历返回新数组
    const resultArr = checkList.map((item) => {
      return item.userId;
    });
    checkedUserIds.value = resultArr;
  };
  //修改当前页码
  const handleCurrentChange = (current) => {
    pager.pageNum = current; //修改当前页码
    getUserList();
  };

  return {
    userQuery,
    userList,
    pager,
    checkedUserIds,
    getUserList,
    handleClick,
    handleFind,
    handleReset,
    handleDelte,
    handlePatchDel,
    handleSelectionChange,
    handleCurrentChange,
  };
};
const baseTableEffect = () => {
  //定义动态表格格式
  const columns = reactive([
    {
      label: "用户ID",
      prop: "userId",
    },
    {
      label: "用户名",
      prop: "userName",
    },
    {
      label: "用户邮箱",
      prop: "userEmail",
      width: 180,
    },
    {
      label: "岗位",
      prop: "job",
    },
    {
      label: "用户状态",
      prop: "state",
      formatter(row, column, value) {
        return {
          1: "在职",
          2: "离职",
          3: "试用期",
        }[value];
      },
    },
    {
      label: "用户角色",
      prop: "role",
      formatter(row, column, value) {
        return {
          0: "管理员",
          1: "普通用户",
        }[value];
      },
    },
    {
      label: "注册时间",
      prop: "createTime",
      width: 180,
    },
    {
      label: "最后登录时间",
      prop: "lastLoginTime",
      width: 180,
    },
  ]);
  return { columns };
};
export default {
  name: "User",
  setup() {
    const { proxy } = getCurrentInstance(); //相当于获得this,必须在setup中使用
    const {
      userQuery,
      userList,
      pager,
      checkedUserIds,
      getUserList,
      handleClick,
      handleFind,
      handleReset,
      handleDelte,
      handlePatchDel,
      handleSelectionChange,
      handleCurrentChange,
    } = userEffect(proxy);
    const { columns } = baseTableEffect();
    getUserList();

    watchEffect(() => {
      //侦听依赖变化执行
      /*    console.log(userQuery.userId, userQuery.userName, userQuery.state); */
    });

    return {
      userQuery,
      userList,
      pager,
      checkedUserIds,
      handleClick,
      columns,
      handleFind,
      handleReset,
      handleDelte,
      handlePatchDel,
      handleSelectionChange,
      handleCurrentChange,
    };
  },
};
</script>
<style lang="scss" scoped></style>