基于element-ui表格的二次封裝實現(xiàn)
在項目中經(jīng)常會使用到element的表格,如果每次都cv,也確實有點麻煩,基于這個情況我對表格進行了二次封裝
寫一個Table組件
首先先寫表格樣式
<el-table :data="tableData" :header-cell-style="headerStyle" :height="height" :border="border" @selection-change="handleSelectionChange" > <el-table-column v-if='selection' type="selection" width="55"> </el-table-column> <el-table-column v-for="v in tableProp" :key="v.label" :prop="v.code" :sortable='v.sortable' :label="v.label" :width="v.width" > <template slot-scope="scope"> <div v-if='!v.code'> {{ scope.row[scope.column.property] }} </div> <div v-else> <slot name="row" :row="scope.row"></slot> </div> </template> <el-table-column v-for="(item, i) in v.data" :key="i" :sortable='item.sortable' align="center" :width="item.width" :prop="item.code" :label="item.label" > <template slot-scope="scope"> <div v-if='!v.code'> {{ scope.row[scope.column.property] }} </div> <div v-else> <slot name="row" :row="scope.row"></slot> </div> </template> </el-table-column> </el-table-column> <el-table-column label="操作" v-if='ishandle'> <template slot-scope="scope"> <slot name="edit" :row="scope.row" :index="scope.$index"></slot> </template> </el-table-column> </el-table>
tableData為當前顯示的數(shù)據(jù),tableProp為表頭的名稱,可以為多級也可以為單級,區(qū)別為data是否存在,headerStyle為表頭樣式,height為表的高度,sortable以該列為基準的排序,border是否顯示邊框,handleSelectionChange多選,selection是否顯示多選,ishandle是否顯示操作,這里使用插槽進行寫操作
export default { props: { height: { type: Number, default: 220, }, ishandle:{ type: Boolean, default: false, }, border:{ type: Boolean, default: false, }, tableProp: { type: Array, default: () => [ { code: 'index', label: '指標', width: 100, }, { code: 'PAC', label: 'PAC', width: 120, data:{ code: 'PAB', label: 'PAB', width: 60, } }, { code: 'PAM', label: 'PAM', width: 60, code:true, }, { code: 'POWER_CONSUMPTION', label: '綜合電耗(kW·h)', width: 50, }, { code: 'WATER_CONSUMPTION', label: '自用水率(%)', }, ], }, tableData: { type: Array, default:() => [ { index:1, PAC:'1' PAM:'1', POWER_CONSUMPTION:'1', WATER_CONSUMPTION:'1' } ] }, Style:{ type:String, default:'font-size: 12px;padding:0;line-height: inherit;font-weight: 500;color: #6A7474;' } }, data() { return { show: false, }; }, methods: { // 樣式 headerStyle() { return this.Style; }, // 多選 handleSelectionChange(val){ this.$emit('SelectionChange',val) } }, };
第二步加分頁
<el-pagination :background='background' :layout="layout" :total="total" :page-size="pageSize" :current-page.sync="current" :page-sizes="pageSizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :hide-on-single-page='singlepage' > </el-pagination>
background背景是否顯示,layout組件布局,子組件名用逗號分隔,total總條數(shù),pageSizes每頁顯示個數(shù)選擇器的選項設置,current當前頁碼,pageSize每頁顯示條目個數(shù),singlepage只有一頁時是否隱藏,handleSizeChangepageSize 改變時會觸發(fā),handleCurrentChange改變時會觸發(fā)
export default { props: { background: { type: Boolean, default: false, }, layout:{ type: String, default: 'total, sizes, prev, pager, next, jumper', }, total:{ type: Number, default: 100, }, pageSize:{ type: Number, default: 10, }, pageSizes:{ type: Array, default: () => [10, 20, 30, 40, 50, 100], }, singlepage: { type: Boolean, default: false, }, current:{ type: Number, default: 1, }, }, methods: { // pageSize 改變時會觸發(fā) handleSizeChangepageSize (val) { this.$emit('handleSizeChangepageSize ',val) }, // currentPage 改變時會觸發(fā) handleCurrentChange(val){ this.$emit('handleCurrentChange',val) } }, };
在頁面中使用
先引入Table.vue頁面
<Table :height="90" class="left-top-table" :tableData="tableIndex" :tableProp="tableProp" @handleCurrentChange='handleCurrentChange' @handleSizeChangepageSize ='handleSizeChangepageSize ' > <template slot="edit" slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.index, scope.row)" >編輯</el-button > </template> </Table>
//pageSize 改變時會觸發(fā) handleCurrentChange(val){ .... } // currentPage 改變時會觸發(fā) handleSizeChangepageSize (val){ .... } // 編輯方法 handleEdit(index,row){ .... }
更多的可以根據(jù)自己項目的需求進行修改,這只是一個大概的項目雛形
到此這篇關(guān)于基于element-ui表格的二次封裝實現(xiàn)的文章就介紹到這了,更多相關(guān)element表格二次封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別
這篇文章主要介紹了Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11Nuxt3+ElementPlus構(gòu)建打包部署全過程
網(wǎng)上大部分關(guān)于Nuxt打包部署教程可謂是可以用五花八門來形容,這對于第一次接觸的朋友簡直是無從下手,這篇文章主要給大家介紹了關(guān)于Nuxt3+ElementPlus構(gòu)建打包部署的相關(guān)資料,需要的朋友可以參考下2023-01-01vue+element的表格實現(xiàn)批量刪除功能示例代碼
這篇文章主要介紹了vue+element的表格實現(xiàn)批量刪除功能示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08