vue+elementui写一个增删改查

下面是一个使用Vue和Element UI实现增删改查的示例：

首先，安装Vue和Element UI：

npm install vue
npm install element-ui

创建一个Vue实例，并在其中引入Element UI：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CRUD Example</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="showAddDialog">添加</el-button>
    <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 slot-scope="scope">
          <el-button @click="showEditDialog(scope.$index)">编辑</el-button>
          <el-button @click="deleteItem(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="addDialogVisible" title="添加" @close="resetForm('addForm')">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="addForm.age"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addItem">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="editDialogVisible" title="编辑" @close="resetForm('editForm')">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="editForm.age"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateItem">确定</el-button>
      </div>
    </el-dialog>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        tableData: [
          { name: '张三', age: 20 },
          { name: '李四', age: 25 },
          { name: '王五', age: 30 },
        ],
        addDialogVisible: false,
        addForm: {
          name: '',
          age: ''
        },
        editDialogVisible: false,
        editForm: {
          name: '',
          age: ''
        },
        editIndex: -1
      },
      methods: {
        showAddDialog() {
          this.addDialogVisible = true;
        },
        addItem() {
          this.tableData.push({ name: this.addForm.name, age: this.addForm.age });
          this.addDialogVisible = false;
          this.resetForm('addForm');
        },
        showEditDialog(index) {
          this.editIndex = index;
          this.editForm.name = this.tableData[index].name;
          this.editForm.age = this.tableData[index].age;
          this.editDialogVisible = true;
        },
        updateItem() {
          this.tableData[this.editIndex].name = this.editForm.name;
          this.tableData[this.editIndex].age = this.editForm.age;
          this.editDialogVisible = false;
          this.resetForm('editForm');
        },
        deleteItem(index) {
          this.tableData.splice(index, 1);
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    })
  </script>
</body>
</html>

这个示例中，我们创建了一个包含增删改查功能的表格。点击“添加”按钮会弹出一个对话框，可以输入姓名和年龄来添加一条数据；点击“编辑”按钮会弹出一个对话框，可以修改选中行的数据；点击“删除”按钮会删除选中行的数据。整个页面使用了Element UI提供的组件，如按钮、表格、对话框和表单等。在Vue的实例中，我们定义了一些数据和方法来实现相应的功能