在ElementUI中构建一个全面且高效的CRUD弹框组件

前端

2023-10-18 12:41:27

ElementUI CRUD 弹框组件：赋能数据管理

在当今快速发展的数字化世界中，前端开发人员面临着构建用户友好且高效界面的挑战。ElementUI 的 CRUD 弹框组件为这一挑战提供了一个强大的解决方案，让开发人员能够轻松实现数据的增、删、改、查操作。

了解 CRUD 弹框组件

CRUD 弹框组件是一个模态对话框，包含一个用于输入或编辑数据的表单。它通常与表格组件结合使用，其中表格显示数据，而弹框用于管理操作。

组件架构

ElementUI 的 CRUD 弹框组件由以下元素组成：

模态对话框： 用于显示表单。
表单： 用于输入或编辑数据。
按钮： 触发增、删、改、查操作。
数据源： 提供数据。

功能实现

CRUD 弹框组件提供以下关键功能：

新增数据： 用户单击“新增”按钮打开弹框，输入数据后保存。
编辑数据： 用户单击表格中的“编辑”按钮，在弹框中修改数据并保存。
删除数据： 用户单击表格中的“删除”按钮，从数据源中删除数据。
查询数据： 用户在表格中输入查询条件，以过滤和查找数据。

实战演练

以下代码演示了如何使用 ElementUI CRUD 弹框组件：

<template>
  <div>
    <el-table :data="tableData">
      <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 @click="handleEdit(scope.row)">编辑</el-button>
          <el-button @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formData.age"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="formData.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const tableData = ref([
      { name: 'John Doe', age: 30, address: '123 Main Street' },
      { name: 'Jane Doe', age: 25, address: '456 Elm Street' },
      { name: 'Peter Smith', age: 40, address: '789 Oak Street' },
    ])

    const dialogTitle = ref('')
    const dialogVisible = ref(false)
    const formData = ref({})

    const handleEdit = (row) => {
      dialogTitle.value = '编辑数据'
      dialogVisible.value = true
      formData.value = row
    }

    const handleDelete = (row) => {
      tableData.value = tableData.value.filter(item => item !== row)
    }

    const handleSave = () => {
      if (dialogTitle.value === '新增数据') {
        tableData.value.push(formData.value)
      } else if (dialogTitle.value === '编辑数据') {
        const index = tableData.value.findIndex(item => item === formData.value)
        tableData.value[index] = formData.value
      }
      dialogVisible.value = false
    }

    return {
      tableData,
      dialogTitle,
      dialogVisible,
      formData,
      handleEdit,
      handleDelete,
      handleSave,
    }
  },
}
</script>