前言
代码写得不好,为什么不封装一下呢,如果用的是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内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!