element 表格二次封裝

<template>

??<div?class="mrt20?table-wrap">

????<el-table?:data="tableData"

?????????????ref="multipleTable"

??????????????v-loading="loading"

??????????????@row-click="onRowClick"

??????????????@row-dblclick="onRowDblclick"

??????????????@sort-change="onSortChange"

??????????????:row-key="getRowKeys"

??????????????@select="select"

??????????????@select-all="selectAll"

??????????????:header-cell-style="{background:'#F8F8F8',?color:'rgba(0,0,0,0.85)'}"

??????????????@selection-change="handleSelectionChange"

??????????????:height="height"

??????????????style="width:?100%">

??????<el-table-column?v-if="!excludeComponent.includes(componentName)"

???????????????????????type="selection"

???????????????????????:reserve-selection="true"

???????????????????????width="55">

??????</el-table-column>

??????<template?v-for="col?in?column">

???????<el-table-column?v-if="col.type?===?'img'"

?????????????????????????:prop="col.prop"

?????????????????????????:key="col.prop"

?????????????????????????:label="col.label"

?????????????????????????:min-width="col.minWidth">

??????????<template?slot-scope="scope">

????????????<span?@click="onClick(scope.row,?'onImg')"><img?src="~@/assets/images/1.png"></span>

??????????</template>

????????</el-table-column>

????????<el-table-column?v-if="col.type?===?'link'"

????????:prop="col.prop"

????????:key="col.prop"

????????:label="col.label"

????????:min-width="col.minWidth">

????????<template?slot-scope="scope">

????????<span?v-if="scope.row[col.prop]"?@click="onClick(scope.row,?'onLink')"?class="a-link"><a>{{scope.row[col.prop]}}</a></span>

????????<span?v-if="!scope.row[col.prop]">-</span>

????????</template>

????????</el-table-column>

????????<el-table-column?v-if="col.type?===?'date'"

????????:prop="col.prop"

????????:key="col.prop"

????????:label="col.label"

????????:min-width="col.minWidth">

????????<template?slot-scope="scope">

????????<span?v-if="scope.row[col.prop]"?>{{scope.row[col.prop]?|?formatDate('yyyy-MM-dd')}}</span>

????????<span?v-if="!scope.row[col.prop]">-</span>

????????</template>

????????</el-table-column>

????????<el-table-column?v-if="col.type?===?'map'"

?????????????????????????HEAD

?????????????????????????:prop="col.prop"

?????????????????????????:key="col.prop"

?????????????????????????:label="col.label"

?????????????????????????:min-width="col.minWidth">

??????????<template?slot-scope="scope">

????????????<span?v-if="scope.row[col.prop]?&&?col.map[scope.row[col.prop]]"?:class="col.map[scope.row[col.prop]].color">{{col.map[scope.row[col.prop]].value?||?col.map[scope.row[col.prop]]}}</span>

????????????<span?v-if="!scope.row[col.prop]?||?!col.map[scope.row[col.prop]]">-</span>

??????????</template>

????????</el-table-column>

????????</el-table-column>

????????<el-table-column?v-if="col.type?===?'button'"

?????????????????????????prop="oprate"

?????????????????????????:min-width="col.minWidth"

?????????????????????????:key="col.prop"

?????????????????????????label="操作">

??????????<template?slot-scope="scope">

????????????<span?v-for="(item,?index)?in?col.buttonList"

??????????????????size="small"

??????????????????:key="index"

??????????????????class="btn-text?mrl10"

??????????????????@click="onClick(scope.row,?item.methods)">{{item.label}}</span>

??????????</template>

????????</el-table-column>

????????<el-table-column?v-if="!['img',?'button',?'map',?'link',?'date'].includes(col.type)"

?????????????????????????:prop="col.prop"

?????????????????????????:key="col.prop"

?????????????????????????:label="col.label"

?????????????????????????:width="col.Width"

?????????????????????????:min-width="col.minWidth">

???????????????<template?slot-scope="scope">

??????????????????????<span?v-if="scope.row[col.prop]"?:class="col.color">{{scope.row[col.prop]}}</span>

??????????????????????<span?v-if="!scope.row[col.prop]"?:class="col.color">{{scope.row[col.prop]}}</span>

???????????????</template>

????????</el-table-column>

??????</template>

????</el-table>

????<div?class="pagination?mrb10">

??????<div?class="footer?flex-end">

????????<el-pagination?background

???????????????????????layout="total,?prev,?pager,?next,?sizes,?jumper"

???????????????????????@size-change="handleSizeChange"

???????????????????????@current-change="handleCurrentChange"

???????????????????????:page-size="size"

???????????????????????:total="total">

????????</el-pagination>

??????</div>

????</div>

??</div>

</template>

<script>

import?{?RESOURCE_COLUMN,?UPLOADAPPROVE_COLUMN,?THEME_UPLOAD_COLUMN,?WALLPAPER_UPLOAD_COLUMN,?DESIGNER_MANAGE_COLUMN?}?from?'./column';

import?{?ThemeService?}?from?'@/service'

export?default?{

??name:?'theme-table',

??components:?{

??},

??props:?['componentName',?'height',?'filterfield'],

??data?()?{

????return?{

??????excludeComponent:?['uploadTheme',?'uploadWallpaper',?'designerManage',?'resourceList'],?//?不需要多選框的組件名

??????advancedshow:?false,

??????column:?RESOURCE_COLUMN,?//?列

??????columnMap:?{

????????'uploadApprove':?{?column:?UPLOADAPPROVE_COLUMN,?methods:?'getApproveList'?},?//?審批列表

????????'resourceList':?{?column:?RESOURCE_COLUMN,?methods:?'getSourceList'?},?//?資源列表

????????'uploadTheme':?{?column:?THEME_UPLOAD_COLUMN,?methods:?'getList'?},?//?主題上傳列表

????????'uploadWallpaper':?{?column:?WALLPAPER_UPLOAD_COLUMN,?methods:?'getList'?},?//?壁紙上傳列表

????????'designerManage':?{?column:?DESIGNER_MANAGE_COLUMN,?methods:?'getDesignerDatail'?},?//?設(shè)計師列表

??????},

??????total:?0,

??????page:?1,

??????size:?10,

??????tableData:?[],?//?表格數(shù)據(jù)

??????loading:?false

????}

??},

??watch:?{

????filterfield:?{

??????handler?(val,?oldVal)?{

????????console.log("b.c:?"?+?val,?oldVal);

??????},

??????deep:?true?//true?深度監(jiān)聽

????}

??},

??methods:?{

????getRowKeys(row)?{

????return?row.id;

????},

????//?查看

????onClick?(row,?methods)?{

??????this.$emit('onClick',?row,?methods)

??????console.log(row,?methods)

????},

????//?多選

????handleSelectionChange?(val)?{

??????console.log(val,?987)

??????this.$emit('handleSelectionChange',?val)

????},

????//?點擊行

????onRowClick(val){

??????this.$emit('row-click',?val)

????},

????//?雙擊行

????onRowDblclick(val){

??????this.$emit('row-dblclick',?val)

????},

????//?勾選觸發(fā)

????select(val){

??????this.$emit('select',?val)

????},

????//?全選

????selectAll(val){

??????this.$emit('select-all',?val)

????},

????//?排序字段

????onSortChange(val){

??????this.$emit('sort-change',?val)

????},

????//?分頁

????getpage?(list,?page,?size)?{

??????return?list.slice(page?*?size?-?size,?page?*?size);

????},


????getData?()?{

??????this.loading?=?true

??????ThemeService[this.columnMap[this.componentName].methods]().then(res?=>?{

????????console.log('查詢',?this.filterfield)

????????this.loading?=?false;

????????this.total?=?res.length;

????????this.tableData?=?this.getpage(res,?this.page,?this.size);

????????this.$emit('getTableData',?this.tableData);

??????})

????},

????//?獲取表格書

????getTableData(){

???????return?this.tableData;

????},

????//?切換每頁條數(shù)

????handleSizeChange?(val)?{

??????this.size?=?val;

??????this.getData();

????},

????//?點擊頁碼

????handleCurrentChange?(val)?{

??????this.page?=?val;

??????this.$emit('handleCurrentChange',?val);

??????this.getData(this.page,?this.size);

????},

????//?例的樣式回調(diào)

????cellStyle?(row)?{

??????if?(row.columnIndex?===?5?&&?row.row.checkResult?===?'失敗'?&&?row.column.label?===?'校驗結(jié)果')?{

????????return?'color:red'

??????}

????},

????//?清空多選

????clearSelection(){

??????this.$refs.multipleTable?&&?this.$refs.multipleTable.clearSelection();

????},

????//?用于多選表格，切換某一行的選中狀態(tài)

????toggleRowSelection(row,?selected){

??????console.log(row,?selected,?'row,?selected')

??????this.$refs.multipleTable?&&?this.$refs.multipleTable.toggleRowSelection(row,?selected);

????}

??},

??mounted?()?{

????this.$nextTick(()?=>?{

??????this.column?=?this.columnMap[this.componentName].column;

??????this.getData();

??????var?aa?=?top.sessionStorage.getItem('datInfo');//獲取緩存數(shù)據(jù)

??????console.log(aa,?this.filterfield,?98777)

????})

??}

}

</script>

<style?lang="less"?scoped>

</style>




import?{?TAST_STATUS,?AREAFLAG,?FEE_STATUS,?THEME_CHECK_RESULT}??from?'@/model';

//?備注：?1.?列type???img?為圖片類型???map?枚舉類,?對于的值和顏色可定義在map對象中??button?操作按鈕類?link??日期時間戳date，自動應(yīng)用過濾器轉(zhuǎn)換????可擴展自定義類型?select?radio?類等

//???????2.?其他無類型默認為?text?類型?可配置color?屬性

//?資源列表

const??RESOURCE_COLUMN?=?[

????{

????????prop:?'originPackageUrl',

????????label:?'多彩的云',

????????minWidth:?'100',

????????type:?'img'

????},

????{

????????prop:?'resName',

????????label:?'資源名稱',

????????minWidth:?'180'

????},

????{

????????prop:?'resId',

????????label:?'資源唯一ID',

????????minWidth:?'180'

????},

????{

????????prop:?'resVersion',

????????label:?'資源版本',

????????minWidth:?'180'

????},

????{

????????prop:?'feeStatus',

????????label:?'收費狀態(tài)',

????????minWidth:?'180',

????????type:?'map',

????????map:?FEE_STATUS

????},

????{

????????prop:?'areaFlag',

????????label:?'分發(fā)區(qū)域',

????????minWidth:?'180',

????????type:?'map',

????????map:?AREAFLAG

????},

????{

????????prop:?'status',

????????label:?'資源狀態(tài)',

????????minWidth:?'180',

????????type:?'map',

????????map:?TAST_STATUS

????},

????{

????????prop:?'oprate',

????????label:?'操作',

????????minWidth:?'180',

????????type:?'button',

????????buttonList?:?[

????????????{'methods':?'onView',?'label':?'查看'},

????????????{'methods':?'onHide',?'label':?'隱藏'},

????????????{'methods':?'onDown',?'label':?'下架'}

????????]

????}

]

//?上架審核

const??UPLOADAPPROVE_COLUMN?=?[

????{

????????prop:?'originPackageUrl',

????????label:?'預(yù)覽圖',

????????minWidth:?'100',

????????type:?'img'

????},

????{

????????prop:?'resName',

????????label:?'資源名稱',

????????minWidth:?'180'

????},

????{

????????prop:?'resId',

????????label:?'資源唯一ID',

????????minWidth:?'180'

????},

????{

????????prop:?'resVersion',

????????label:?'資源版本',

????????minWidth:?'180'

????},

????{

????????prop:?'uploader',

????????label:?'設(shè)計師名稱',

????????minWidth:?'180'

????},

????{

????????prop:?'feeStatus',

????????label:?'收費狀態(tài)',

????????minWidth:?'180',

????????type:?'map',

????????map:?FEE_STATUS

????},

????{

????????prop:?'areaFlag',

????????label:?'分發(fā)區(qū)域',

????????minWidth:?'180',

????????type:?'map',

????????map:?AREAFLAG

????},

????{

????????prop:?'status',

????????label:?'待審核狀態(tài)',

????????minWidth:?'180',

????????type:?'map',

????????map:?TAST_STATUS

????},

????{

????????prop:?'oprate',

????????label:?'操作',

????????minWidth:?'80',

????????type:?'button',

????????buttonList?:?[

????????????{'methods':?'onProve',?'label':?'審核'},

????????]

????}

]

//?主題上傳

const??THEME_UPLOAD_COLUMN?=?[

????{

????????prop:?'resName',

????????label:?'資源名稱',

????????minWidth:?'100',

????????type:?'text'

????},

????{

????????prop:?'resVersion',

????????label:?'資源版本號',

????????minWidth:?'180'

????},

????{

????????prop:?'endTime',

????????label:?'系統(tǒng)校驗時間',

????????minWidth:?'180',

????????type:?'date'

????},

????{

????????prop:?'uploader',

????????label:?'設(shè)計師名稱',

????????minWidth:?'180'

????},

????{

????????prop:?'reason',

????????label:?'校驗結(jié)果',

????????minWidth:?'180'

????},

????{

????????prop:?'remark',

????????label:?'備注',

????????minWidth:?'180'

????}

]

//?壁紙上傳

const??WALLPAPER_UPLOAD_COLUMN?=?[

????{

????????prop:?'resName',

????????label:?'壁紙文件名',

????????minWidth:?'180',

????},

????{

????????prop:?'resName1',

????????label:?'壁紙名稱',

????????minWidth:?'180'

????},

????{

????????prop:?'resVersion',

????????label:?'壁紙版本號',

????????minWidth:?'180'

????},

????{

????????prop:?'uploader',

????????label:?'設(shè)計師名稱',

????????minWidth:?'180'

????},

????{

????????prop:?'endTime',

????????label:?'系統(tǒng)校驗時間',

????????minWidth:?'180',

????},

????{

????????prop:?'checkResult',

????????label:?'校驗結(jié)果',

????????minWidth:?'180',

????????type:?'map',

????????map:??THEME_CHECK_RESULT

????},

????{

????????prop:?'remarks',

????????label:?'備注',

????????minWidth:?'180',

????}

]

//?設(shè)計師管理

const?DESIGNER_MANAGE_COLUMN?=?[

????{

????????prop:?'desChineseName',

????????label:?'設(shè)計師中文名稱',

????????Width:?'560'

????},

????{

????????prop:?'desEnglishName',

????????label:?'設(shè)計師英文名稱',

????????Width:?'560'

????},

????{

????????prop:?'desNumId',

????????label:?'設(shè)計師ID',

????????Width:?'560'

????},

????{

????????prop:?'creatData',

????????label:?'賬號創(chuàng)建日期',

????????Width:?'150'

????}

]

export??{

?????RESOURCE_COLUMN,

?????UPLOADAPPROVE_COLUMN,

?????THEME_UPLOAD_COLUMN,

?????WALLPAPER_UPLOAD_COLUMN,

?????DESIGNER_MANAGE_COLUMN

????}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容