每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js
基于 Avue 的 CRUD 表格组件封装
发布时间：2023-07-07 15:48:36
修改时间：2023-07-07 15:48:36
阅读：917
评论：0
0
在 components 文件夹中，创建一个新的 .vue 文件，例如：AvueCrudTable.vue。
透传父组件传递的属性和事件 ：
1、利用v-bind=“attrs" 支持所有 avue 的使用方法并在其基础上进行封装
2、使用v−on="listeners” 将父组件传递的所有事件监听器绑定到 avue-crud 组件
AvueCrudTable 组件的模板、逻辑和样式。
1、 AvueCrudTable.vue 中定义默认的操作栏按钮，同时允许用户覆盖这些默认按钮。使用 props 接收传递的 actionButtons，并遍历数组以生成操作栏按钮
<template> <div> <avue-crud ref="crudTable" v-bind="$attrs" v-on="$listeners" > <template #rowActions="{ row, rowIndex }"> <el-button v-for="button in actionButtons" :key="button.label" v-if="getPermission(button.permission)" :type="button.type" size="mini" @click="$emit(button.action, row, rowIndex)" > {{ button.label }} </el-button> </template> </avue-crud> </div> </template> <script> export default { name: "AvueCrudTable", props: { // ... actionButtons: { type: Array, default: () => [], }, }, methods: { onRefresh() { this.$emit("refresh"); }, onSave(row, done, loading) { this.$emit("save", row, done, loading); }, onUpdate(row, index, done, loading) { this.$emit("update", row, index, done, loading); }, onRemove(row, index, done, loading) { this.$emit("remove", row, index, done, loading); }, onSelectionChange(selection) { this.$emit("selection-change", selection); }, // ... 其他方法 handleEdit(row, rowIndex) { this.$emit("edit", row, rowIndex); }, handleDelete(row, rowIndex) { this.$emit("delete", row, rowIndex); }, }, }; </script> <style scoped> </style>
在这个示例中，我们为 AvueCrudTable 组件添加了更多事件处理方法，包括 onSave（保存）、onUpdate（更新）、onRemove（删除）和 onSelectionChange（选中项变更）。这些方法会将事件传递给父组件，方便在父组件中处理具体的业务逻辑。
ParentComponent使用：在需要使用封装好的组件的地方
功能附加：
1、封装表格行内操作栏
在这个示例中，我们定义了一个名为 actionButtons 的数组，其中包含两个按钮配置对象。每个对象包含 label（按钮文本）、type（按钮类型）、permission（权限标识符）和 action（点击事件处理程序名）属性。并将 actionButtons 传递给 AvueCrudTable.vue
2、按钮权限
使用了 mapGetters 辅助函数从 Vuex store 中获取权限数据，并将其映射到计算属性中。然后我们使用 v-if 指令根据权限数据控制按钮的显示。
<!-- ParentComponent.vue --> <template> <div> <avue-crud-table :data="tableData" :columns="columns" :option="tableOption" :action-buttons="actionButtons" @refresh="handleRefresh" @save="handleSave" @update="handleUpdate" @remove="handleRemove" @selection-change="handleSelectionChange" ></avue-crud-table> </div> </template> <script> import { mapGetters } from "vuex"; import AvueCrudTable from "@/components/AvueCrudTable.vue"; import crudTableMixin from "@/mixins/crudTableMixin.js"; export default { mixins: [crudTableMixin], components: { AvueCrudTable, }, computed: { ...mapGetters("permissions", ["getEditPermission", "getDeletePermission"]), }, data() { return { // ... actionButtons: [ { label: "编辑", type: "primary", permission: "edit", action: "handleEdit", }, { label: "删除", type: "danger", permission: "delete", action: "handleDelete", }, ], } }, methods: { // ... 其他方法 handleEdit(row, rowIndex) { // 处理编辑操作 }, handleDelete(row, rowIndex) { // 处理删除操作 }, }, }; </script> <style scoped> </style>
在这个示例中，我们在父组件 ParentComponent.vue 中使用了封装好的 AvueCrudTable 组件。通过监听 AvueCrudTable 的自定义事件（例如：@refresh、@save、@update、@remove 和 @selection-change），我们可以在父组件中处理具体的业务逻辑。
mixins混入：使用方式
初始化时去掉表格头部的左侧操作栏和右侧按钮，我们需要在 tableOption 中修改默认值
// crudTableMixin.js export default { data() { return { tableData: [], // 表格数据 columns: [], // 列定义 tableOption: { menu: { // 隐藏左侧操作栏 show: false, }, search: { // 隐藏右侧按钮 show: false, }, }, // 表格选项 }; }, methods: { // ... }, };Vuex权
限 ：将权限数据存储在 Vuex 中，并在组件中使用 getter 获取权限数据
在 Vuex store 中添加一个名为 permissions 的模块：
// store/modules/permissions.js const state = { edit: true, delete: false, }; const getters = { getEditPermission: (state) => state.edit, getDeletePermission: (state) => state.delete, }; export default { namespaced: true, state, getters, };
我们创建了一个名为 permissions 的模块，并定义了两个 getter，分别用于获取编辑和删除权限。
在 Vuex store 的 index.js 文件中，引入 permissions 模块：
// store/index.js import Vue from "vue"; import Vuex from "vuex"; import permissions from "./modules/permissions"; Vue.use(Vuex); export default new Vuex.Store({ modules: { permissions, }, });
回复列表
注册用户登录后才能发表评论，请 关键字词：span,nbsp,style,font-size,1px,gt
上一篇：css常用属性