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

前言

代码写得不好,为什么不封装一下呢,如果用的是ElementUI框架,也可以在此基础上进行二次封装。譬如说,这个用来对列表数据进行增删改查的弹框。

开始封装

原本只是个小功能,但是别的模块也需要用到。

我的想法就是,把弹框标题,table表头,必填字节,接口请求路径,增删改查CRUD,等等,放在一个json对象里面。通过父组件向子组件传参的方式,展示不同内容,调用不同的接口。

极大提高了代码的复用性。

json对象如下所示

  // 示例:
    let example = {
      // 弹框标题
      popTitle: "编辑主题",
      // table
      columnList: [
        {
          prop: "themeName",
          label: "主题名称",
        },
        {
          prop: "themeDescribe",
          label: "主题描述",
        },
      ],
      // 必填的字段
      requiredKeys: ["themeName"],
      tableData: this.themeList,
      // 主键,默认为id
      idKey: "id",
      // 删除的参数名称,默认为ids
      deleteKey: "ids",
      // 批量的参数名称,默认为ids
      batchDeleteKey: "ids",
      // 接口请求路径,增删改查CRUD
      interfaceUrl: {
        add: "/target/addTheme",
        edit: "/target/updateTheme",
        delete: "/target/deleteTheme",
        // 批量删除
        batchDelete: "/target/deleteTheme",
        list: "/target/themelist",
      },
    };

table表头作为列表传入,数据结构如下

 columnList: [
    {
      prop: "themeName",
      label: "主题名称",
    },
    {
      prop: "themeDescribe",
      label: "主题描述",
    },
],

在子组件中循环渲染出表头

<el-table-column
  v-for="(item, index) in columnList"
  :key="index"
  :show-overflow-tooltip="item.showOverflowTooltip || true"
  :align="item.align || 'center'"
  :header-align="item.headerAlign || item.align || 'center'"
  :label="item.label"
  :width="item.width"
>
  <template slot-scope="scope">
    <span v-if="scope.row.statusBtn === false">{{ scope.row[item.prop] }}</span>
    <el-input
      v-else-if="scope.row.statusBtn === true"
      v-model="scope.row[item.prop]"
      size="mini"
    />
  </template>
</el-table-column>

在父组件中调用

<!-- 编辑主题的弹框 -->
<edit-table-modal
  ref="editTableModal"
  :visible.sync="editTableModal.show"
  :tableObject="themeTableObject"
  v-if="editTableModal.show"
  @ok="editTableFunction"
/>

到此这篇关于vue.js基于ElementUI封装了CRUD的弹框组件的文章就介绍到这了,更多相关 ElementUI封装CRUD内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

  • Mybatis-Plus 通用CRUD的详细操作
  • mybatisplus 复合主键(多主键) CRUD示例详解
  • Mybatis-Plus实体类注解方法与mapper层和service层的CRUD方法
  • vue elementUI 处理文件批量上传方式
  • EF Core的CRUD(增删改查)基本操作
  • 解决elementui中NavMenu导航菜单高亮问题(解决多种情况)
  • VUE-ElementUI 时间区间选择器的使用
  • 前端elementUI select选择器实现远程搜索
  • ElementUI时间选择器限制选择范围disabledData的使用
张贴在2