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

开头先BB两句

回头看自己以前的代码，感觉就像屎一样。我会想，为什么不封装一下，如果用的是ElementUI框架，也可以在此基础上进行二次封装。

譬如说，这个用来对列表数据进行增删改查的弹框。

开始封装

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

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

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

json对象如下所示

 // 示例：let example = {// 弹框标题popTitle: "编辑主题",// tablecolumnList: [{prop: "themeName",label: "主题名称",},{prop: "themeDescribe",label: "主题描述",},],// 必填的字段requiredKeys: ["themeName"],tableData: this.themeList,// 主键，默认为ididKey: "id",// 删除的参数名称，默认为idsdeleteKey: "ids",// 批量的参数名称，默认为idsbatchDeleteKey: "ids",// 接口请求路径，增删改查CRUDinterfaceUrl: {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-columnv-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-inputv-else-if="scope.row.statusBtn === true"v-model="scope.row[item.prop]"size="mini"/></template>
</el-table-column>