el-table 翻页后保留所勾选项
前言
在本周的开发中，碰到一个表格翻页之后，仍然保留所勾过的选项的功能。在原组件中，并没有这样的功能，所以经过查找分析，就有了下面的一个例子，分析给大家。
lAHPDiQ3QhLt3PbNAtzNA4k_905_732.gif
思路
查找资料后可得
为了实现保留的功能，所以需要存储勾选内容的数组（
selectedItems）通过el-table中的
toggleRowSelection方法，可以设置行的选中状态。通过el-table中的
select和select-all获得勾选或者取消的内容
步骤
表格勾选
表格单选
因为翻页之后，点选时selection会出现undefined,所以这里需要进行判断 这里可以通过判断选择selection中有没有row，就可以判断出是增加还是删减
select (selection, row) {
if (selection && selection.find(item => item && (item.id == row.id))) {
this.addRows([row])
} else {
this.deleteRows([row])
}
}
表格全选
通过selection数组长度判断是选中还是取消
selectAll (selection) {
if (selection.length > 0) {
this.addRows(this.tableData)
} else {
this.deleteRows(this.tableData)
}
},
编辑勾选数组
添加选中
添加时判断selectedItems中是否存在当前row数据，存在则直接return
addRows (rows) {
rows.forEach(row => {
if (this.selectedItems.find(item => item.id == row.id)) { return }
this.selectedItems.push(row)
});
},
取消选中
当selectedItems为空数组时，则直接 return
deleteRows (rows) {
if (this.selectedItems.length == 0) { return }
rows.forEach(row => {
this.selectedItems = this.selectedItems.filter(item => item.id == row.id)
})
}
设置选中状态
这里使用this.$nextTick是保证表格渲染完成之后，才添加选中效果。 selectedItem是筛选循环当前行row是否在当前表格tableData数据中。
rows.forEach(row => {
this.$nextTick(() => {
let selectedItem = this.tableData.find(item => item.id == row.id)
this.$refs.multipleTable.toggleRowSelection(selectedItem);
});
})
完整代码
<template>
<div>
<el-table ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
:key="randomKey"
style="width: 100%"
@select="select"
@select-all="selectAll">
<el-table-column type="selection"
width="55">
</el-table-column>
<el-table-column label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column prop="id"
label="ID"
show-overflow-tooltip>
</el-table-column>
</el-table>
<el-pagination layout="prev, pager, next,slot"
:current-page="pages.index"
@current-change="handleCurrentChange"
:total="pages.count"
:page-size="pages.size">
</el-pagination>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{ date: '2016-05-03', name: '王小虎', id: '0' },
{ date: '2016-05-03', name: '王小虎', id: '1' },
{ date: '2016-05-03', name: '王小虎', id: '2' },
{ date: '2016-05-03', name: '王小虎', id: '3' },
{ date: '2016-05-03', name: '王小虎', id: '4' },
{ date: '2016-05-03', name: '王小虎', id: '5' },
{ date: '2016-05-03', name: '王小虎', id: '6' },
{ date: '2016-05-03', name: '王小虎', id: '7' },
{ date: '2016-05-03', name: '王小虎', id: '8' },
{ date: '2016-05-03', name: '王小虎', id: '9' },
{ date: '2016-05-03', name: '王小虎', id: '10' },
{ date: '2016-05-03', name: '王小虎', id: '11' },
{ date: '2016-05-03', name: '王小虎', id: '12' },
{ date: '2016-05-03', name: '王小虎', id: '13' },
{ date: '2016-05-03', name: '王小虎', id: '14' },
{ date: '2016-05-03', name: '王小虎', id: '15' },
{ date: '2016-05-03', name: '王小虎', id: '16' },
{ date: '2016-05-03', name: '王小虎', id: '17' },
{ date: '2016-05-03', name: '王小虎', id: '18' },
{ date: '2016-05-03', name: '王小虎', id: '19' },
{ date: '2016-05-03', name: '王小虎', id: '20' }
],
tableData: [],
selectedItems: [],
pages: { size: 10, index: 1, count: 50 },
randomKey: Math.random(),
}
},
mounted () {
this.pages.count = this.items.length || 0
this.setTabelData()
},
methods: {
//设置页面数据
setTabelData () {
let { index, size } = this.pages
this.tableData = this.items.slice((index - 1) * size, (index - 1) * size + size)
//randomKey是table数据改动时，刷新table的
this.randomKey = Math.random()
this.selectedPreExisting(this.selectedItems)
},
//监听翻页
handleCurrentChange (index) {
this.pages.index = index
this.setTabelData()
},
//选中table已有数据
selectedPreExisting (rows) {
if (rows.length > 0) {
//这里使用this.$nextTick是防止表格未渲染完成就执行，导致无法添加选中效果
this.$nextTick(() => {
rows.forEach(row => {
//判断row是存在当前tableData
let selectedItem = this.tableData.find(item => item.id == row.id)
this.$refs.multipleTable.toggleRowSelection(selectedItem);
});
})
} else {
this.$refs.multipleTable.clearSelection();
}
},
//表格单选
select (selection, row) {
//因为翻页之后，点选时selection会出现undefined,所以这里需要进行判断
//这里可以通过判断选择selection中有没有row，就可以判断出是增加还是删减
if (selection && selection.find(item => item && (item.id == row.id))) {
this.addRows([row])
} else {
this.deleteRows([row])
}
},
//表格全选
selectAll (selection) {
//判断是选中还是取消
if (selection.length > 0) {
this.addRows(this.tableData)
} else {
this.deleteRows(this.tableData)
}
},
//添加选中
addRows (rows) {
rows.forEach(row => {
//过滤，当selectedItems有此条数据时，则直接返回，不执行添加
if (this.selectedItems.find(item => item.id == row.id)) { return }
this.selectedItems.push(row)
});
},
//取消选中
deleteRows (rows) {
//当selectedItems为空数组时，不执行删除
if (this.selectedItems.length == 0) { return }
rows.forEach(row => {
this.selectedItems = this.selectedItems.filter(item => item.id == row.id)
})
}
}
}
</script>
