在vue和element-ui的table中实现分页复选功能

背景

后台管理系统中，使用表格展示数据时，可能的需求是多项选择然后进行批量操作，也期望能翻页多选。

实现

页面结构如下

<el-table
 class="table"
 :data="tableData"
 border
 style="width: 100%"
 @selection-change="handleSelectionChange"
 ref="asTable"
>
 <el-table-column
 width="50"
 type="selection"
 fixed="left"
 >
 </el-table-column>
 <el-table-column
 prop="id"
 label="ID"
 >
 </el-table-column>
 <el-table-column
 prop="name"
 label="名字"
 >
 </el-table-column>
 <el-table-column
 label="操作"
 width="100"
 >
 <template slot-scope="scope">
  <el-button type="primary" plain size="small" @click="handleEdit(scope.row)" >编辑</el-button>
 </template>
 </el-table-column>
</el-table>
<el-pagination
 background
 @current-change="handleCurrentChange"
 :current-page.sync="pagination.currentPage"
 :page-size="pagination.size"
 layout="total, prev, pager, next, jumper"
 :total="pagination.total"
 slot="pagination"
>
</el-pagination>

模拟数据实现分页

data () {
 return {
 tableData: [],
 multipleSelection: [],
 pagination: {
  currentPage: 1,
  size: 10,
  total: 1000
 }
 }
},
beforeMount () {
 this.fetchData()
},
methods: {
 fetchData () {
 this.tableData = [] let start = (this.pagination.currentPage - 1) * this.pagination.size
 let end = this.pagination.currentPage * this.pagination.size
 setTimeout(_ => {
  for (let i = start; i < end; i++) {
  this.tableData.push({
   id: i,
   name: `王${i}兰`
  })
  }
 }
 },
 handleCurrentChange () {
 this.fetchData()
 },
 handleSelectionChange (val) {
 this.multipleSelection = val
 },
}

展示已选择项

<div class="result">
 已选：{{ allMultipleSelection }}
</div>
allMultipleSelection: [],

在复选事件中对所选项进行存储

主要思路就是：

将当前页已选数据放入所有已选项

将所有已选项数据中当前页没选择的项移除

handleSelectionChange (val) {
 this.multipleSelection = val
 // @tip 实现分页复选
 console.log(val, 'selection')
 setTimeout(_ => {
 this.resolveAllSelection()								 
 1/2    1 2 下一页 尾页