封裝一個優雅的element ui表格元件
阿新 • • 發佈:2018-12-13
現在做後臺系統用vue + elementUI 的越來越多,那element ui的 el-table 元件肯定也離不開。雖然element ui的table元件很好。但是表格和分頁是分離的。每次寫表格的時候都要寫分頁。這個就比較麻煩了。那我們可不可以把表格和分頁封裝在一起呢?照這個思路那我們重新封裝一個帶分頁的表格。
思路:
- 表格元件要包含分頁,不用每次都重新寫分頁
- 儘量保證el-table原生方法
- 方便易用
照這個思路我們開始寫程式碼
先把表格和分頁寫在一起
<template> <div> <!-- 表格資料 --> <el-table highlight-current-row //點選當前行高亮 :data="tableDate" //表格資料 border //新增斑馬線 :height="tableHeight" //表格高度 v-loading="loading" //loading動畫 :size="size" //表格大小 @sort-change = "sortChange" //排序 @selection-change="selectionChange" //多選 @current-change="currentChange" @row-click = "rowClick" //單行點選 style="width: 100%"> <slot></slot> </el-table> <el-pagination v-if="paging" @size-change="limitChange" @current-change="pageChange" :current-page.sync="params.page" :page-size="params.limit" :page-sizes="[10, 15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="tableCount"> </el-pagination> </div> </template> <script> export default { props: { //請求介面 api: { required: true }, //引數 預設返回分頁和條數 params: { type: [Object,String,Number], default: function() { return { page: 1, limit: 15 }; } }, // 尺寸 size: { default: 'small' }, // 分頁 paging: { default: true } }, data() { return { tableCount: 0, //總條數 tableDate: [], //表格資料 loading: false, //loading動畫 }; }, created() { this.init(this.params); }, computed: { // 實時更新server server:function(){ return this.api.split('.')[0] }, // 實時更新url url:function(){ return this.api.split('.')[1] }, tableHeight:function(){ return this.paging?'calc(100% - 32px)':'100%' } }, methods: { init(params) { this.loading = true; //如果採用微服務的方式需要傳微服務和url this.$api[this.server][this.url](params) .then(res => { this.tableDate = res.data || []; // 如果有分頁 if(this.paging){ this.tableCount = res.count || 0; this.params.page = res.curr || 0; } }) .finally(() => { //關閉loading this.loading = false; }); }, // 重新請求 //如果需要重新請求使用$refs 呼叫這個方法 reload() { // 如果有分頁 if(this.paging){ this.params.page = 1; } // api動態載入完 開始重新請求資料 this.$nextTick(()=>{ this.init(this.params); }) }, 以下是對el-table原來的方法再次封裝emit出去 // 多選 selectionChange(val){ this.$emit('selection-change',val) }, // 單選 currentChange(currentRow, oldCurrentRow){ this.$emit('current-change',currentRow, oldCurrentRow) }, rowClick(row, event, column){ this.$emit('row-click',row, event, column) }, // 排序 sortChange(column, prop, order){ this.$emit('sort-change',column, prop, order) }, // 表格翻頁 pageChange(page) { this.params.page = page; this.init(this.params); }, limitChange(limit){ this.params.limit = limit; this.init(this.params); }, } }; </script>
別人使用起來非常簡單 ,也不用再寫任何請求方法
可以全域性引入
<d-table api="bizSystemService.getEmployeeList" //微服務名稱+介面名稱 :params="queryForm" //介面請求的引數. 預設是limit和page ref="table" size="small"> //下面的使用方式和el-table一樣 <el-table-column align="center" label="序號" width="50"> <template slot-scope="scope"> {{scope.$index+1}} </template> </el-table-column> <el-table-column prop="roleTypeName" align="center" label="角色型別" width="120"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">檢視</el-button> <el-button type="text" size="small">編輯</el-button> </template> </d-table-column> </el-table>
如果想重新整理資料 使用reload方法即可. this.$refs.table.reload()
原文地址:https://segmentfault.com/a/1190000017346342