使用 vite + vue3 + ts + element-plus 写一个 用户管理的版块 (用户新增 用户列表搜索 数据删除 数据修改 )

好的，我可以为你提供一些参考代码来帮助你实现这个功能。

首先，你需要安装相关的依赖：

npm install -D vite vue@next @vue/compiler-sfc typescript element-plus

然后，在你的项目根目录下创建一个 `src` 文件夹，并在其中创建一个名为 `UserManagement.vue` 的组件，它将包含所有用户管理相关的代码。

在 `UserManagement.vue` 文件中，你可以使用以下代码来编写模板：

<template>
  <div>
    <!-- 用户新增 -->
    <el-form :model="formData" ref="formData" label-width="80px" style="width: 500px;">
      <el-form-item label="用户名">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addUser">新增用户</el-button>
      </el-form-item>
    </el-form>
    <!-- 用户列表搜索 -->
    <el-form :model="searchData" label-width="80px" style="width: 500px; margin-top: 20px;">
      <el-form-item label="用户名">
        <el-input v-model="searchData.username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchUser">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 用户列表 -->
    <el-table :data="userData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="text" @click="editUser(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 用户编辑 -->
    <el-dialog :visible.sync="dialogVisible" title="编辑用户" :before-close="closeDialog">
      <el-form :model="editData" ref="editData" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="editData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editData.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

在上面的模板中，我们定义了一个表单用于新增用户，另一个表单用于搜索用户，一个表格用于展示搜索结果并且可以进行删除和编辑操作，还定义了一个对话框用于编辑用户。

接下来，在 `<script>` 标签中添加以下代码：

<script lang="ts">
import { defineComponent } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElDialog } from 'element-plus';

export default defineComponent({
  name: 'UserManagement',
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
    ElTable,
    ElTableColumn,
    ElDialog,
  },
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      searchData: {
        username: '',
      },
      userData: [
        {
          username: 'user1',
          password: '123456',
        },
        {
          username: 'user2',
          password: '123456',
        },
      ],
      editData: {
        username: '',
        password: '',
      },
      dialogVisible: false,
    };
  },
  methods: {
    addUser() {
      if (this.$refs.formData.validate()) {
        this.userData.push(this.formData);
        this.formData = {
          username: '',
          password: '',
        };
      }
    },
    searchUser() {
      // 进行搜索操作
    },
    editUser(row: any) {
      this.editData = { ...row };
      this.dialogVisible = true;
    },
    saveUser() {
      if (this.$refs.editData.validate()) {
        const index = this.userData.findIndex(user => user.username === this.editData.username);
        this.userData.splice(index, 1, this.editData);
        this.dialogVisible = false;
      }
    },
    deleteUser(row: any) {
      const index = this.userData.findIndex(user => user.username === row.username);
      this.userData.splice(index, 1);
    },
    closeDialog(done: any) {
      this.$refs.editData.resetFields();
      done();
    },
  },
});
</script>

在上面的代码中，我们定义了一个 `UserManagement` 组件，其中包含了 `formData`、`searchData`、`userData`、`editData` 和 `dialogVisible` 这些数据，分别用于表单、搜索、用户列表、编辑和对话框的相关操作。我们还定义了一些方法，用于新增、搜索、编辑、保存、删除和关闭对话框等操作。

最后，在 `main.ts` 文件中，使用以下代码来注册 `UserManagement` 组件：

import { createApp } from 'vue';
import UserManagement from './src/UserManagement.vue';

const app = createApp(UserManagement);

app.mount('#app');

现在，你可以运行 `npm run dev`，在浏览器中打开 http://localhost:3000，就可以看到你的用户管理界面了。