温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-07-04 13:45:15 来源:亿速云 阅读:429 作者:iii 栏目:开发技术

本文小编为大家详细介绍“vue.js基于ElementUI如何封装CRUD的弹框组件”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue.js基于ElementUI如何封装CRUD的弹框组件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

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

    开始封装

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

    我的想法就是,把弹框标题,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的弹框组件”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

    向AI问一下细节
    推荐阅读:
    1. js选择弹框
    2. layer弹框

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI