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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue + element動態多表頭與動態插槽
- vue+elementUI實現內嵌table的方法示例
- vue中的slot-scope及scope.row用法
- 關於el-table表格組件中插槽scope.row的使用方式
- vue實現表格分頁功能