经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue.js基于ElementUI封装了CRUD的弹框组件
来源:jb51  时间:2022/7/4 14:10:03  对本文有异议

前言

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

开始封装

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

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

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

json对象如下所示

  1. // 示例:
  2. let example = {
  3. // 弹框标题
  4. popTitle: "编辑主题",
  5. // table
  6. columnList: [
  7. {
  8. prop: "themeName",
  9. label: "主题名称",
  10. },
  11. {
  12. prop: "themeDescribe",
  13. label: "主题描述",
  14. },
  15. ],
  16. // 必填的字段
  17. requiredKeys: ["themeName"],
  18. tableData: this.themeList,
  19. // 主键,默认为id
  20. idKey: "id",
  21. // 删除的参数名称,默认为ids
  22. deleteKey: "ids",
  23. // 批量的参数名称,默认为ids
  24. batchDeleteKey: "ids",
  25. // 接口请求路径,增删改查CRUD
  26. interfaceUrl: {
  27. add: "/target/addTheme",
  28. edit: "/target/updateTheme",
  29. delete: "/target/deleteTheme",
  30. // 批量删除
  31. batchDelete: "/target/deleteTheme",
  32. list: "/target/themelist",
  33. },
  34. };

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

  1. columnList: [
  2. {
  3. prop: "themeName",
  4. label: "主题名称",
  5. },
  6. {
  7. prop: "themeDescribe",
  8. label: "主题描述",
  9. },
  10. ],

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

  1. <el-table-column
  2. v-for="(item, index) in columnList"
  3. :key="index"
  4. :show-overflow-tooltip="item.showOverflowTooltip || true"
  5. :align="item.align || 'center'"
  6. :header-align="item.headerAlign || item.align || 'center'"
  7. :label="item.label"
  8. :width="item.width"
  9. >
  10. <template slot-scope="scope">
  11. <span v-if="scope.row.statusBtn === false">{{ scope.row[item.prop] }}</span>
  12. <el-input
  13. v-else-if="scope.row.statusBtn === true"
  14. v-model="scope.row[item.prop]"
  15. size="mini"
  16. />
  17. </template>
  18. </el-table-column>

在父组件中调用

  1. <!-- 编辑主题的弹框 -->
  2. <edit-table-modal
  3. ref="editTableModal"
  4. :visible.sync="editTableModal.show"
  5. :tableObject="themeTableObject"
  6. v-if="editTableModal.show"
  7. @ok="editTableFunction"
  8. />

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号