基于 Avue 的 CRUD 表格组件封装

Mr.T's Blog

已于 2023-06-08 16:32:12 修改

阅读量711

点赞数

文章标签： javascript 前端 vue.js

于 2023-03-24 14:11:13 首次发布

本文链接：https://blog.csdn.net/qq_27751965/article/details/129748868

版权

本文介绍了如何在Vue项目中封装一个基于Avue的CRUD表格组件，详细阐述了组件模板、逻辑和样式的设置，以及如何在ParentComponent中使用该组件。此外，还讨论了如何通过mixins混入功能，实现表格行内操作栏的封装，并利用Vuex进行权限管理，根据getter获取权限数据来控制按钮的显示。

摘要由CSDN通过智能技术生成

在 components 文件夹中，创建一个新的 .vue 文件，例如：AvueCrudTable.vue。

透传父组件传递的属性和事件：
1、利用v-bind=“ $a tt rs " 支持所有 a vu e 的使用方法并在其基础上进行封装 2 、使用 v - o n = "$ 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: