用vue3以及elementplus写一个增删改查的页面

好的，我可以为您提供一个基本的示例，该示例使用 Vue 3 和 Element Plus 编写一个增删改查页面。

首先，我们需要安装 Vue 3 和 Element Plus 库。您可以使用以下命令进行安装：

npm install vue@next
npm install element-plus

然后，我们可以创建一个名为 `App.vue` 的 Vue 单文件组件，并编写以下代码：

<template>
  <div class="container">
    <el-form :model="form" label-width="80px">
      <el-form-item label="Name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="Email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="Phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="Address">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">Submit</el-button>
        <el-button @click="resetForm">Reset</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="email" label="Email"></el-table-column>
      <el-table-column prop="phone" label="Phone"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
      <el-table-column label="Action" width="150">
        <template #default="{row}">
          <el-button type="text" @click="editRow(row)">Edit</el-button>
          <el-button type="text" @click="deleteRow(row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="Name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="Phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="Address">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="saveEditForm">Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  name: 'App',
  setup() {
    const form = ref({
      name: '',
      email: '',
      phone: '',
      address: ''
    });

    const tableData = ref([
      {
        name: 'John Doe',
        email: 'john.doe@example.com',
        phone: '(123) 456-7890',
        address: '123 Main St, Anytown USA'
      },
      {
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
        phone: '(987) 654-3210',
        address: '456 Oak St, Anytown USA'
      }
    ]);

    const editForm = ref({
      name: '',
      email: '',
      phone: '',
      address: ''
    });

    const dialogVisible = ref(false);
    const editIndex = ref(-1);

    const submitForm = () => {
      if (!form.value.name || !form.value.email || !form.value.phone || !form.value.address) {
        ElMessage.warning('Please fill in all fields');
        return;
      }
      tableData.value.push({
        name: form.value.name,
        email: form.value.email,
        phone: form.value.phone,
        address: form.value.address
      });
      form.value = {
        name: '',
        email: '',
        phone: '',
        address: ''
      };
      ElMessage.success('New item added successfully');
    };

    const resetForm = () => {
      form.value = {
        name: '',
        email: '',
        phone: '',
        address: ''
      };
    };

    const editRow = (row) => {
      editForm.value = Object.assign({}, row);
      editIndex.value = tableData.value.indexOf(row);
      dialogVisible.value = true;
    };

    const saveEditForm = () => {
      if (!editForm.value.name || !editForm.value.email || !editForm.value.phone || !editForm.value.address) {
        ElMessage.warning('Please fill in all fields');
        return;
      }
      tableData.value[editIndex.value] = Object.assign({}, editForm.value);
      dialogVisible.value = false;
      ElMessage.success('Item updated successfully');
    };

    const deleteRow = (row) => {
      const index = tableData.value.indexOf(row);
      tableData.value.splice(index, 1);
      ElMessage.success('Item deleted successfully');
    };

    return {
      form,
      tableData,
      editForm,
      dialogVisible,
      submitForm,
      resetForm,
      editRow,
      saveEditForm,
      deleteRow
    };
  }
};
</script>

<style>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>

此示例包括一个表单，用于添加新条目，并在下面显示一个表格，其中包含所有现有条目。表格的每一行都包括编辑和删除按钮，以便用户可以修改或删除该行对应的条目。还包括一个对话框，用于编辑现有条目。

这只是一个基本示例，您可以根据自己的需求进行修改和扩展。