前言
vue的UI框架非常多挥等，我司后臺主要是用餓了么團隊的element ui（http://element.eleme.io/#/zh-CN）開發(fā)的挂绰，順便吐槽下之前開發(fā)移動端用的是餓了么的mint ui，坑賊多项乒，有空整理下啰劲。。檀何。蝇裤。
業(yè)務(wù)場景
可以簡單理解為一個專場拼接的功能，可以往里面插入各種模塊频鉴。左邊是預(yù)覽區(qū)栓辜，右邊是控制區(qū)（木圖幫助大家腦補下emmm），一個模塊可以插入很多次垛孔，我們這里就當(dāng)只插入商品模塊藕甩，商品模塊的控制區(qū)域（展示商品小圖預(yù)覽然后可以刪除），點擊+號彈出彈層選擇商品周荐。
算了還是上個圖吧
彈窗就不放了狭莱，element ui 帶多選框分頁器的demo就是
把這塊拆分出來，就是預(yù)覽區(qū)的此模塊為父級組件（其上還有預(yù)覽區(qū)為最頂級組件）概作，控制區(qū)域為子組件腋妙，彈層為子組件調(diào)用的模塊
關(guān)于數(shù)據(jù)的問題的話可以使用vuex也可以$emit往上一級一級傳就不細說了。
DOM結(jié)構(gòu)
<el-table ref="productTable" :data="list" @selection-change="select" @select="choserow" border show-overflow-tooltip stripe>
<el-table-column
label-class-name="table_header"
label="全選"
type="selection"
header-align="center"
width="100"></el-table-column>
<el-table-column
label-class-name="table_header"
label="商品名稱"
prop="name"
header-align="center"
width="555">
<template slot-scope="scope">
<img class="productImg" :src="scope.row.img_cover" alt="商品主圖">
<p class="productP">
<a>{{ scope.row.title }}</a><br>
</p>
</template>
</el-table-column>
<el-table-column
label-class-name="table_header"
label="項目類型"
prop="product_type"
header-align="center"
width="150"></el-table-column>
<el-table-column
label-class-name="table_header"
label="上架時間"
prop="online_date"
header-align="center"
width="250"></el-table-column>
<el-pagination class="page" ref="elPagition"
background
layout="prev, pager, next"
:total="pagination.total"
:page-size="+pagination.page_size"
:current-page="pagination.page"
@current-change="page"
></el-pagination>
</el-table>
數(shù)據(jù)
data() {
return {
is_visible: false, // todo: 彈層是否可以顯示
list: [], // 列表數(shù)據(jù)源
selected: [], // 真實選中的值讯榕，用于最后返回
pagination: {
page: 1,
page_size: Number,
total: 1
},
menu1List: [], //篩選相關(guān) 三級層連
menu2List: [],
itemList: [],
checkList: [], // 記錄之前選中的
title: '', // 搜索后不清空雙向綁定的值
tname: '', // 同上骤素，拿來搜索的值
form: {
item_id: '',
menu1_id: '',
menu2_id: '',
}
}
},
功能梳理
1匙睹、表格經(jīng)過搜索、分頁后谆甜，數(shù)據(jù)保留
table綁定的selection-change只能拿到當(dāng)前表格選中的值垃僚，因此要設(shè)置兩個數(shù)組。每次觸發(fā)selection-change將當(dāng)前結(jié)果放入selected规辱，當(dāng)list重新刷新之前，處理checkList
this.checkList = this.unique( this.checkList.concat( this.selected ) )
unique( arr ) {
// 帶有g(shù)etset的對象似乎不能用es6數(shù)組去重
// return Array.from(new Set(arr))
// const res = new Map();
// return arr.filter((a) => !res.has(a) && res.set(a, 1))
let hash = {}
return arr.reduce( function ( item, next ) {
hash[next.pid] ? '' : hash[next.pid] = true && item.push( next )
return item
}, [] )
},
2栽燕、自動勾選
很顯然我們這個需求是可以選中已有模塊罕袋，此時彈窗時數(shù)據(jù)應(yīng)同步到table中并選中相應(yīng)元素。其次在換頁碍岔、重新搜索時浴讯，也應(yīng)把checkList內(nèi)的值重新選中。
因為實在沒找著column api里有關(guān)于默認(rèn)勾選的設(shè)置蔼啦，或許是我眼瞎榆纽，求指正。捏肢。奈籽。 就只能在頁面組件load、list刷新時手動勾選鸵赫。
//其他組件可以通過調(diào)用此ref的load()來調(diào)出
load( ...rest ) {
...//通過參數(shù)傳好checkList后
this.autoSelect( this.checkList )
},
autoSelect( arr ) {
this.$nextTick( () => {
if ( this.list !== undefined && arr !== undefined ) {
this.list.forEach( ( v, i ) => {
arr.forEach( ( _v, _i ) => {
if ( v.pid === _v.pid ) {
this.$refs.productTable.toggleRowSelection( v, true )
}
} )
} )
}
} )
},
3衣屏、切換模塊table重置
table模塊只存在一個，因此每次load的時候都需要重置搜索條件辩棒、page狼忱。但是手動修改data里面的current-page對應(yīng)的值是失效的。
比如走之前是2一睁，關(guān)閉了（或者重新打開時）需要重設(shè)page钻弄，當(dāng)前page是1，但是分頁器組件內(nèi)依舊是2者吁，因此再切換到2分頁的時候不會觸發(fā)事件窘俺。
我們可以在監(jiān)聽彈層的is_visible
watch: {
is_visible() {
// 頁碼為其他關(guān)閉彈層后 再打開彈層應(yīng)當(dāng)將當(dāng)前page設(shè)為1，需要同時設(shè)置分頁器內(nèi)的lastEmittedPage為1砚偶，否則會出點了頁碼沒反應(yīng)的bug
!this.is_visible && ( this.$refs.elPagition.lastEmittedPage = 1 )
}
},
這樣既可
順便求推薦一波坑少的UI框架
