国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

基于element-ui表格的二次封裝實現(xiàn)

3403771864 / 886人閱讀

　　項目中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ù)選擇器的選項設(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){
　　....
　　}

　　上述只是大概的雛形，有些微變動可以依照需求更改。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/127666.html

相關(guān)文章

  • 基于Vue+element-ui 的Table二次封裝

    摘要：本人第一次寫這個寫的不好還望指出來作為一個由于公司產(chǎn)品的升級然促使我從一個后端人員自學變成前端的開發(fā)人員公司做的數(shù)據(jù)管理系統(tǒng)所以離不開表格了然后表格樣式統(tǒng)一啥的就想到封裝一個里面的了效果圖表格組件的引入與使用監(jiān)測數(shù)據(jù)表格 本人第一次寫這個 寫的不好還望指出來作為一個由于公司產(chǎn)品的升級然促使我從一個后端人員自學變成前端的開發(fā)人員 ！公司做的數(shù)據(jù)管理系統(tǒng)所以離不開表格了 然后表格樣式統(tǒng)一啥...

    you_De 評論0 收藏0

  • axios基于常見業(yè)務(wù)場景的二次封裝(更新)

    摘要：時隔一年再次更新下根據(jù)項目下常見業(yè)務(wù)場景對的二次封裝功能實現(xiàn)兼容瀏覽器避免緩存減少或更新重復(fù)請求接口域名使用環(huán)境變量全局狀態(tài)可關(guān)閉的全局錯誤提醒可開啟攜帶全局分頁參數(shù)攔截器請求攔截器請求開始請求出錯響應(yīng)攔截器請求結(jié)束請求錯誤處理網(wǎng)絡(luò)請求中， 時隔一年再次更新下根據(jù)vue項目下常見業(yè)務(wù)場景對axios的二次封裝 功能實現(xiàn)：1.兼容ie瀏覽器避免緩存2.減少或更新重復(fù)請求3.接口域名使用環(huán)...

    dailybird 評論0 收藏0

  • vue封裝element-ui的table組件,靈活配置表頭實現(xiàn)表格內(nèi)編輯，按鈕，鏈接等功能。

    摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內(nèi)編輯后，自動選中該行。單元格內(nèi)數(shù)據(jù)樣式單元格內(nèi)按鈕，可多個。觸發(fā)組件綁定函數(shù)，參數(shù)按鈕名稱，按鈕樣式，按鈕事件標識。單元格是否可點擊的判斷函數(shù)，可進行復(fù)雜的函數(shù)判斷。 vue-bxz-table 一、封裝element-ui的table組件： 定義表格高度全屏 增加前臺分頁功能。 自定義表頭，循環(huán)輸出整體表結(jié)構(gòu)。 表格內(nèi)編輯（輸入框...

    henry14 評論0 收藏0

  • D2 Crud，一款簡單易用的表格組件

    摘要：是一套基于和的表格組件。將的功能進行了封裝，并增加了表格的增刪改查數(shù)據(jù)校驗表格內(nèi)編輯等常用的功能。大部分功能可由配置實現(xiàn)，在實現(xiàn)并擴展了表格組件功能的同時，降低了開發(fā)難度，減少了代碼量，大大簡化了開發(fā)流程。 D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格組件。D2-Crud 將 Element 的功能進行了封裝，并增加了表格的增刪改...

    fevin 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇)

    摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    Channe 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<