Vue 与 Element-UI 实现数据增删改查功能的方法

在前端开发中，数据的增删改查（CRUD）功能是极为常见的需求。Vue 作为一款流行的 JavaScript 框架，搭配功能强大的 Element-UI 组件库，能够高效地实现这些功能。

我们需要搭建项目环境。通过 Vue CLI 快速创建一个新的 Vue 项目，并安装 Element-UI。在项目的 main.js 文件中引入 Element-UI 及其样式，这样就可以在项目中使用丰富的组件了。

实现数据展示（查）功能，我们可以使用 Element-UI 的 Table 组件。在 Vue 组件中定义数据列表，将数据绑定到 Table 组件的 data 属性上。例如：

<template>
  <el-table :data="tableData">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    // 模拟从后端获取数据
    this.tableData = [
      { id: 1, name: '数据1' },
      { id: 2, name: '数据2' }
    ]
  }
}
</script>

增加数据（增）操作，我们可以利用 Element-UI 的 Dialog 组件弹出一个表单，用户填写数据后提交。在表单提交方法中，将新数据添加到数据列表中，并可以通过接口发送到后端存储。

<template>
  <el-button @click="addDataDialogVisible = true">添加数据</el-button>
  <el-dialog :visible.sync="addDataDialogVisible" title="添加数据">
    <el-form ref="addFormRef" :model="addForm">
      <el-form-item label="名称" prop="name">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addDataDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="addData">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      addDataDialogVisible: false,
      addForm: { name: '' }
    }
  },
  methods: {
    addData() {
      this.tableData.push({ id: this.tableData.length + 1, name: this.addForm.name });
      this.addDataDialogVisible = false;
      this.addForm.name = '';
    }
  }
}
</script>

修改数据（改）和删除数据（删）功能也类似。修改时通过 Dialog 弹出编辑表单，填充原有数据供用户修改；删除则是在点击删除按钮时，从数据列表中移除相应数据，并向后端发送删除请求。

通过 Vue 与 Element-UI 的紧密配合，我们能够简洁明了地实现数据的增删改查功能，为用户提供流畅的交互体验，提升项目开发效率。