element table 多选与分页回显功能

需求

vue项目使用elementUI的el-table多选分页回显功能，需要给导入后的员工批量选择添加部门，使用表格分页展示，并且选中的数据要求回显。

效果图

下面六张图包括界面的样式，表格全选与取消全选、选中与取消选中对应的数据编号，以及分页回显逻辑。
图一：数据及界面（左边全部员工每页6条，右边选中的员工不分页）

图二：选中第一页的六条数据与第二页的六条数据

图三：回到第一页可以看到数据正常回显

图四：点击右侧选中员工移除按钮后效果

图五：点击左侧取消选中后的效果（切换页面回显后也没问题）

图六：左侧取消全选的效果（只取消当前界面六条数据的选择，选中员工中的数据是第二页的数据）

实现

话不多说上代码

html

<template>
  <div class="content-box">
    <el-button size="small" type="primary" @click="onUserAddBtn" >添加员工</el-button>
    <!-- 添加员工 -->
    <el-dialog title="添加部门员工" width="800px" :visible.sync="userVisible" :before-close="handleUserClose">
      <el-row :gutter="20">
        <el-col :span="14">
          <div>全部员工（{{ allUsers.length }}）</div>
          <el-table ref="multipleTable" row-key="id" :data="allUsers" tooltip-effect="dark" style="width: 100%"
            size="mini" border height="250" @select="handleSelectionChange" @select-all="selectAll">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column type="index" label="序号" width="50" align="center" />
            <el-table-column prop="name" label="姓名" align="center" />
          </el-table>
          <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
            layout="prev, pager, next, jumper" :total="total" :small="true">
          </el-pagination>
        </el-col>
        <el-col :span="10">
          <div>选中员工（{{ selectUsers.length }}）</div>
          <el-table :data="selectUsers" style="width: 100%" size="mini" border height="250">
            <el-table-column type="index" label="序号" width="50" align="center" />
            <el-table-column prop="name" label="姓名" align="center" />
            <el-table-column prop="address" label="操作" align="center" width="80">
              <template slot-scope="scope">
                <el-link :underline="false" @click.native.prevent="deleteUser(scope.row)">移除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleUserClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitUsers">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

js

<script>
import api from './api'
export default {
  data() {
    return {
      userVisible: false, // 分配员工弹窗状态
      allUsers: [], // 所有为分配公司的员工
      selectUsers: [], // 选中的员工
      page: 1,
      total: 0,
      limit: 6
    }
  },
  methods: {
    onUserAddBtn(row) { // 添加员工弹窗
      api.AllUsers({ page: this.page, limit: this.limit }).then(res => {
        if (res.code === 200) {
          this.allUsers = res.data
          this.page = res.page
          this.total = res.total
          this.userVisible = true
        } else {
          res.$message.error(res.msg)
        }
      })
    },
    handleUserClose() { // 关闭员工弹窗
      this.userVisible = false
      this.allUsers = []
      this.selectUsers = []
      this.page = 1
      this.total = 0
    },
    selectAll(arr) { // 是否全选
      if (arr.length !== 0) {
        // 全选
        arr.forEach(item => {
          const bool = this.selectUsers.some(user => user.id === item.id) // 存在返回true 否则返回false
          if (!bool) {
            // 不存在添加
            this.selectUsers.push(item)
          }
        })
      } else {
        // 取消全选
        this.allUsers.forEach(item => {
          this.selectUsers = this.selectUsers.filter(user => user.id !== item.id)
        })
      }
    },
    handleSelectionChange(arr, row) { // 选择
      const bool = this.selectUsers.some(user => user.id === row.id) // 存在返回true 否则返回false
      if (bool) {
        // 存在删除
        this.selectUsers = this.selectUsers.filter(user => user.id !== row.id)
      } else {
        // 添加
        this.selectUsers.push(row)
      }
    },
    deleteUser(node) { // 移除
      this.selectUsers = this.selectUsers.filter(user => user.id !== node.id)
      this.allUsers.forEach(item => {
        if (node.id === item.id) {
          // 存在添加
          this.$refs.multipleTable.toggleRowSelection(item, false)
        }
      })
    },
    handleCurrentChange(val) { // 分页按钮
      const obj = { page: val, limit: this.limit }
      api.AllUsers(obj).then(res => {
        if (res.code === 2000) {
          this.allUsers = []
          this.allUsers = res.data
          this.page = res.page
          this.total = res.total
          this.echoSelected()
        } else {
          res.$message.error(res.msg)
        }
      })
    },
    echoSelected() { // 回显选中
      if (this.selectUsers.length > 0) {
        this.$nextTick(() => {
          this.allUsers.forEach(item => {
            if (this.selectUsers.some(user => user.id === item.id)) {
              // 存在添加
              this.$refs.multipleTable.toggleRowSelection(item)
            }
          })
        })
      }
    },
    submitUsers() { // 确认添加员工
      if (this.selectUsers.length > 0) {
        // 提交逻辑根据需求自己写
        ....
      } else {
        this.$message.error('请选择要添加的员工')
      }
    }
  }
}
</script>

遇到的问题

实现过程中遇到的遇到的问题，也许你也在为这些问题发愁呢？

https://blog.csdn.net/xuelong5201314/article/details/132732206