前端vue3增删改查功能代码 要求使用element plus

好的，针对您的要求，我可以提供一个简单的示例代码，供您参考。

首先，需要在Vue3项目中引入element plus库，可以通过npm安装：

npm install element-plus --save

然后，在Vue3组件中使用element plus提供的组件和样式，例如：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" title="编辑信息">
      <el-form :model="form" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="form.age"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { ElTable, ElTableColumn, ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'
export default {
  components: {
    ElTable,
    ElTableColumn,
    ElButton,
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
  },
  setup() {
    const tableData = reactive([
      { name: '张三', age: 18 },
      { name: '李四', age: 20 },
      { name: '王五', age: 22 },
    ])
    const form = reactive({
      name: '',
      age: '',
    })
    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
    }
    const dialogVisible = reactive(false)
    const handleEdit = (row) => {
      form.name = row.name
      form.age = row.age
      dialogVisible.value = true
    }
    const handleDelete = (row) => {
      const index = tableData.indexOf(row)
      tableData.splice(index, 1)
    }
    const handleSubmit = () => {
      // TODO: 提交表单数据到后端
      dialogVisible.value = false
    }
    return {
      tableData,
      form,
      rules,
      dialogVisible,
      handleEdit,
      handleDelete,
      handleSubmit,
    }
  },
}
</script>

在这个示例中，我们使用了element plus提供的el-table、el-dialog、el-form等组件，实现了数据的展示、编辑和删除等功能。同时，我们使用了Vue3的响应式数据、组件化等特点，让代码更加简洁和易于维护。

需要注意的是，这个示例还没有与后端进行数据交互，您需要根据实际情况，使用axios等网络请求库，向后端发送请求，获取数据并更新到前端页面上。

希望这个示例能对您有所帮助，如有需要，请随时联系我。