vue30+elementui写一个增删改查

以下是使用Vue 3.0和Element UI实现增删改查的示例代码：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入关键字"></el-input>
    <el-button type="primary" @click="search">搜索</el-button>

    <el-table :data="tableData" style="margin-top: 20px">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" @click="remove(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="编辑用户" :append-to-body="true">
      <el-form :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>

    <el-button type="primary" style="margin-top: 20px" @click="add">新增用户</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      searchText: '',
      tableData: [
        { name: '张三', age: 18, address: '北京' },
        { name: '李四', age: 20, address: '上海' },
        { name: '王五', age: 22, address: '广州' },
      ],
      dialogVisible: false,
      form: {
        name: '',
        age: '',
        address: '',
      },
    };
  },
  methods: {
    search() {
      // 根据关键字搜索用户
      // 这里只是模拟搜索，实际开发中可以通过接口请求后台数据
      this.tableData = this.tableData.filter(item => {
        return item.name.includes(this.searchText) || item.address.includes(this.searchText);
      });
    },
    add() {
      // 打开新增对话框
      this.dialogVisible = true;
      this.form = {
        name: '',
        age: '',
        address: '',
      };
    },
    save() {
      // 保存用户信息
      // 这里只是模拟保存，实际开发中可以通过接口请求后台保存数据
      if (this.form.name && this.form.age && this.form.address) {
        // 编辑模式
        if (this.editIndex !== -1) {
          this.tableData[this.editIndex] = { ...this.form };
          this.editIndex = -1;
        } else {
          // 新增模式
          this.tableData.push({ ...this.form });
        }
        this.dialogVisible = false;
      }
    },
    edit(row) {
      // 打开编辑对话框
      this.dialogVisible = true;
      this.form = { ...row };
      this.editIndex = this.tableData.findIndex(item => item === row);
    },
    remove(index) {
      // 删除用户
      // 这里只是模拟删除，实际开发中可以通过接口请求后台删除数据
      this.tableData.splice(index, 1);
    },
  },
};
</script>

上述代码实现了一个简单的用户管理功能，包括搜索、新增、编辑和删除用户的操作。用户列表通过tableData数组保存，搜索功能通过过滤tableData数组实现。新增和编辑功能通过dialogVisible控制对话框的显示与隐藏，保存用户信息时根据是否有editIndex判断是新增还是编辑操作。删除功能通过splice方法从tableData数组中移除对应的用户数据