開(kāi)發(fā)過(guò)程中供炼，我們時(shí)常會(huì)用到表格組件一屋，一般翻頁(yè)由后臺(tái)實(shí)現(xiàn)，當(dāng)我們需要實(shí)現(xiàn)表格多選時(shí)袋哼，翻頁(yè)導(dǎo)致數(shù)據(jù)重新刷新冀墨，導(dǎo)致我們之前選擇的項(xiàng)無(wú)法保存。這里主要記錄下iview table 如何實(shí)現(xiàn):
代碼如下：
<template>
<div id="add-edit-wrap">
<Tabs value="name1">
<TabPane label="單詞列表" name="name1" :disabled="this.albumListObj ? false : true">
<Button type='primary' icon="minus" @click="delBatches" style="margin-bottom: 20px;">批量刪除</Button>
<Table @on-selection-change="selectionChange" :loading="tableLoading" :columns="tabcol" :data="tabledata" :border="true"></Table>
<div class="page-wrap" style="margin-top: 20px; text-align: right;">
<Page
show-total
:total="listTotal"
:page-size="listParams.pageSize"
:current="listParams.page"
show-elevator
@on-change="changePageList"
></Page>
</div>
</TabPane>
</Tabs>
</div>
</template>
<script>
const uniqBy = require("lodash.uniqby")
const remove = require("lodash.remove")
const differenceBy = require("lodash.differenceby")
import { searchAlbum, addAlbum, editAlbum, searchBindAlbumWord, delBindAlbumWord, vocabularyList, bindAlbumWord } from '@/api/spoken'
import { mapState } from 'vuex'
export default {
name: 'spokenDetail',
data() {
return {
albumDatas: {
albumName: '',
albumIntro: ''
},
file: null,
loadingStatus: false,
upLoadUrl: '',
imgUrl: '',
id: null,
// 單詞列表
tableLoading: false,
tabcol: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '問(wèn)題ID',
key: 'id',
align: 'center'
},
{
title: '問(wèn)題',
key: 'question',
align: 'center'
},
{
title: '回答',
key: 'answer',
align: 'center'
},
{
title: '翻譯',
key: 'translation',
align: 'center'
},
{
title: '描述',
key: 'description',
align: 'center'
},
{
title: '操作',
align: 'center',
width: 162,
render: (h, params) => {
return h('div', [
h('i-button', {
props: {
type: 'text',
size: 'large',
icon: 'trash-a'
},
on: {
click: () => {
this.$Modal.confirm({
title: '刪除',
content: `確定刪除該專(zhuān)輯綁定的詞匯嗎涛贯？`,
onOk: () => {
delBindAlbumWord({bindIds: params.row.bindId}).then(res => {
if (res.code === 200) {
this.$Message.success('刪除成功')
this.searchBindAlbumWordList()
} else {
this.$Message.error(res.msg)
}
})
}
})
}
}
})
])
}
}
],
tabledata: [],
listParams: {
page: 1,
pageSize: 10,
albumId: null
},
listTotal: 0,
selection: [],
selected: [],
sureLoading: false
}
},
computed: {
...mapState({
albumListObj: 'albumListObj'
})
},
created() {
if (this.albumListObj) {
// 編輯
this.albumDatas.albumName = this.albumListObj.albumName
this.albumDatas.albumIntro = this.albumListObj.albumIntro
this.imgUrl = this.albumListObj.albumUrl
this.id = this.albumListObj.id
// 獲取該專(zhuān)輯下綁定的單曲
this.listParams.albumId = this.albumListObj.id
this.searchBindAlbumWordList()
}
},
methods: {
selectionChange(selection) {
if (selection.length) {
this.selection = selection.map((item) => {
return item.bindId
})
} else {
this.selection = []
}
},
delBatches() {
if (!this.selection.length) {
this.$Message.error('請(qǐng)選擇需要?jiǎng)h除的詞匯诽嘉！')
return
}
this.$Modal.confirm({
title: '批量刪除',
content: `確定批量刪除這些詞匯嗎？`,
onOk: () => {
let params = this.selection.join(',')
delBindAlbumWord({bindIds: params}).then(res => {
if (res.code === 200) {
this.$Message.success('刪除成功!')
this.searchBindAlbumWordList()
} else {
this.$Message.error(res.msg)
}
})
}
})
},
changePageList(val) {
this.listParams.page = val
this.searchBindAlbumWordList()
},
changePage(val) {
this.searchVocDatas.page = val
this.getvocabularyList()
},
getvocabularyList() {
this.tableVocLoading = true
vocabularyList(this.searchVocDatas).then(res => {
this.tableVocLoading = false
this.total = res.data.total
this.tableVocdata = res.data.records
}).then(res => {
this.updateChecked()
})
},
// 翻頁(yè)記憶
handleCancel(selection, row) {
//從已選項(xiàng)中去除取消項(xiàng)
remove(this.selected, n => {
return n.id === row.id
});
},
handleSelect(selection, row) {
//添加到已選項(xiàng)
this.selected.push(row)
},
handleSelectAll(selection) {
//數(shù)組合并弟翘，有可能用戶(hù)先選擇了某幾項(xiàng)虫腋，已經(jīng)被我們push進(jìn)去，因此數(shù)組合并需要去重一下
this.selected = uniqBy(this.selected.concat(selection), "id")
},
handleCancelSelectAll(selection) {
//從已選項(xiàng)中移除當(dāng)頁(yè)數(shù)據(jù)
this.selected = differenceBy(this.selected, this.tableVocdata, "id")
},
//把源數(shù)據(jù)加上_checked字段稀余，遍歷已選項(xiàng)數(shù)據(jù)岔乔，更新選中狀態(tài)
updateChecked() {
for (var i = 0; i < this.tableVocdata.length; i++) {
this.tableVocdata[i]._checked = false
for (var j = 0; j < this.selected.length; j++) {
if (this.selected[j].id === this.tableVocdata[i].id) {
this.tableVocdata[i]._checked = true
this.$refs.selection.objData[i]._isChecked = true
}
}
}
},
}
}
</script>
```主要方法為updateChecked，每次獲取列表數(shù)據(jù)時(shí)去核對(duì)一遍數(shù)據(jù)滚躯， 利用this.$refs.selection.objData[i]._isChecked = true設(shè)置選中.