vue.js基于ElementUI封装了CRUD的弹框组件

让我来给你详细讲解一下vue.js基于ElementUI封装了CRUD的弹框组件的完整攻略。

简介

CRUD是指增加(Create)、读取(Read)、更新(Update)和删除(Delete)，是Web应用程序中最常见的操作，几乎每个网站都会用到。因此，为了提高开发效率，很多框架都提供了CRUD的封装组件，vue.js也不例外。本文主要介绍vue.js基于ElementUI封装了CRUD的弹框组件的使用方法。

安装

在使用该组件前，请确保已经安装vue.js和ElementUI。如果你还没有安装这些组件，请先安装：

npm install vue
npm install element-ui

接下来，安装vue.js基于ElementUI封装的CRUD弹框组件：

npm install vue-crud-dialog

使用

使用该组件需要在Vue组件中引入：

import CrudDialog from 'vue-crud-dialog'

然后，在Vue组件中注册并使用该组件，例如：

<template>
  <div>
    <crud-dialog
      :visible.sync="dialogVisible"
      :data="data"
      :fields="fields"
      :rules="rules"
      :title="'用户'"
      :create-action="createAction"
      :read-action="readAction"
      :update-action="updateAction"
      :delete-action="deleteAction"
      @submit="onSubmit"
      @cancel="onCancel" />
  </div>
</template>

<script>
  import CrudDialog from 'vue-crud-dialog'

  export default {
    components: {
      CrudDialog
    },
    data() {
      return {
        dialogVisible: false,
        data: {},
        fields: [
          { prop: 'id', label: 'ID' },
          { prop: 'name', label: '姓名', required: true },
          { prop: 'age', label: '年龄', required: true },
          { prop: 'sex', label: '性别' },
        ],
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' },
            { type: 'number', message: '年龄必须是数字值' }
          ]
        },
        createAction: (data) => setUserData(data),
        readAction: (id) => getUserById(id),
        updateAction: (id, data) => updateUserById(id, data),
        deleteAction: (id) => deleteUserById(id)
      }
    },
    methods: {
      onSubmit() {
        // 表单提交成功回调函数
      },
      onCancel() {
        // 取消按钮点击回调函数
      }
    }
  }
</script>

上述代码中，我们引入了vue-crud-dialog模块，并注册了该组件。在Vue组件中我们定义了一组数据(data)，包含了一系列字段(fields)和对应的校验规则(rules)，以及处理CRUD操作的回调函数(createAction, readAction, updateAction, deleteAction)。我们还创建了两个回调函数(onSubmit和onCancel)来处理表单提交和取消按钮点击。

示例

下面，我们来看看该组件的具体使用，我们假设我们的目标是使用该组件展示和管理一个用户列表。

示例一

首先，我们在列表中列出用户的姓名、年龄、性别等信息。当单击“新增”按钮时，弹出一个表单对话框，让用户输入要新增的用户信息：

<template>
  <div>
    <el-button type="primary" @click="addUser">新增</el-button>
    <el-table :data="users">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column>
        <template slot-scope="{row}">
          <el-button type="primary" @click="editUser(row.id)">编辑</el-button>
          <el-button type="danger" @click="deleteUser(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <crud-dialog
      :visible.sync="dialogVisible"
      :data="selectedUser"
      :fields="fields"
      :rules="rules"
      :title="'用户'"
      :create-action="createUser"
      :update-action="updateUser"
      :cancel-action="cancelUser"
      @submit="onSubmit"
      @cancel="onCancel" />
  </div>
</template>

<script>
  import CrudDialog from 'vue-crud-dialog'

  export default {
    components: {
      CrudDialog
    },
    data() {
      return {
        dialogVisible: false,
        users: [],
        selectedUser: {},
        fields: [
          { prop: 'name', label: '姓名', required: true },
          { prop: 'age', label: '年龄', required: true, type: 'number' },
          { prop: 'sex', label: '性别' }
        ],
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' },
            { type: 'number', message: '年龄必须是数字值' }
          ]
        },
        createAction: (data) => createUser(data),
        readAction: (id) => getUserById(id),
        updateAction: (id, data) => updateUserById(id, data),
        deleteAction: (id) => deleteUserById(id)
      }
    },
    methods: {
      addUser() {
        this.dialogVisible = true
        this.selectedUser = {}
      },
      editUser(id) {
        this.dialogVisible = true
        this.selectedUser = this.users.find(user => user.id === id)
      },
      deleteUser(id) {
        if (confirm(`是否删除ID为${id}的用户？`)) {
          deleteUserById(id)
          this.users = this.users.filter(user => user.id !== id)
        }
      },
      createUser(data) {
        const { name, age, sex } = data
        const id = Math.max(...this.users.map(user => user.id)) + 1
        this.users.push({ id, name, age, sex })
      },
      updateUser(id, data) {
        const index = this.users.findIndex(user => user.id === id)
        Object.assign(this.users[index], data)
      },
      cancelUser() {
        this.selectedUser = {}
      },
      onSubmit() {
        this.dialogVisible = false
        this.$message.success('提交成功')
      },
      onCancel() {
        this.dialogVisible = false
      }
    }
  }
</script>

上述代码中，我们在模板中添加了一个按钮来新增新的用户，同时将用户信息以表格的形式展示在页面上。当新增或编辑按钮被点击时，selectedUser变量被更新，该变量用于存储当前操作的用户信息。dialogVisible用于显示和隐藏弹框。表单组件的data属性用于传递用户信息，fields用于定义表单字段，rules用于定义表单字段的校验规则，各回调函数createAction、readAction、updateAction和deleteAction分别对应新增、查询、编辑和删除操作。submit事件和cancel事件分别处理提交和取消按钮的点击事件。

示例二

接下来，我们在前面例子的基础上，给用户列表添加分页功能。将用户及分页信息分别使用两个组件来展示和管理，以便更好的读取和管理数据。

<template>
  <div>
    <user-list :users="users" :current-page.sync="currentPage" />
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="changePage" />
  </div>
</template>

<script>
  import CrudDialog from 'vue-crud-dialog'
  import UserList from './UserList'

  export default {
    components: {
      CrudDialog,
      UserList
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        users: []
      }
    },
    mounted() {
      this.loadUsers()
    },
    methods: {
      loadUsers() {
        const { currentPage, pageSize } = this
        const startIndex = (currentPage - 1) * pageSize
        const endIndex = startIndex + pageSize
        this.users = getUsers(startIndex, endIndex)
        this.total = getTotalUsersCount()
      },
      changePage(page) {
        this.currentPage = page
        this.loadUsers()
      },
      addUser() {
        this.dialogVisible = true
        this.selectedUser = {}
      },
      editUser(id) {
        this.dialogVisible = true
        this.selectedUser = this.users.find(user => user.id === id)
      },
      deleteUser(id) {
        if (confirm(`是否删除ID为${id}的用户？`)) {
          deleteUserById(id)
          this.users = this.users.filter(user => user.id !== id)
        }
      },
      createUser(data) {
        const { name, age, sex } = data
        const id = Math.max(...this.users.map(user => user.id)) + 1
        this.users.push({ id, name, age, sex })
      },
      updateUser(id, data) {
        const index = this.users.findIndex(user => user.id === id)
        Object.assign(this.users[index], data)
      },
      cancelUser() {
        this.selectedUser = {}
      },
      onSubmit() {
        this.dialogVisible = false
        this.loadUsers()
        this.$message.success('提交成功')
      },
      onCancel() {
        this.dialogVisible = false
      }
    }
  }
</script>

上述代码中，我们创建了一个UserList组件，用于展示用户列表。该组件展示了用户的姓名、年龄和性别，并提供了“新增”、“编辑”、“删除”三个按钮来进行操作。我们在主组件中引入该组件，并将用户信息和当前页码通过props传递给它。在主组件中，我们还将分页器添加到了页面中，并绑定了当前页码和总数，并监听了current-change事件，以便在页码发生变化时更新用户信息。

除上述示例外，该组件还可以应用在其他一些常见的业务场景中，例如图书、商品、订单等列表的管理，具体应用方法可以参考上述示例。