element table 多选与分页回显功能_el-table多选回显(2)

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以点击这里获取！

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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

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

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

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

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

实现

话不多说上代码

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)


为了做好运维面试路上的助攻手，特整理了上百道 **【运维技术栈面试题集锦】** ，让你面试不慌心不跳，高薪offer怀里抱！

这次整理的面试题，**小到shell、MySQL，大到K8s等云原生技术栈，不仅适合运维新人入行面试需要，还适用于想提升进阶跳槽加薪的运维朋友。**

![](https://img-blog.csdnimg.cn/img_convert/92efd6ac6206db30c1be9f99544f3494.png)

本份面试集锦涵盖了

*   **174 道运维工程师面试题**
*   **128道k8s面试题**
*   **108道shell脚本面试题**
*   **200道Linux面试题**
*   **51道docker面试题**
*   **35道Jenkis面试题**
*   **78道MongoDB面试题**
*   **17道ansible面试题**
*   **60道dubbo面试题**
*   **53道kafka面试**
*   **18道mysql面试题**
*   **40道nginx面试题**
*   **77道redis面试题**
*   **28道zookeeper**

**总计 1000+ 道面试题， 内容 又全含金量又高**

*   **174道运维工程师面试题**

> 1、什么是运维?

> 2、在工作中，运维人员经常需要跟运营人员打交道，请问运营人员是做什么工作的?

> 3、现在给你三百台服务器，你怎么对他们进行管理?

> 4、简述raid0 raid1raid5二种工作模式的工作原理及特点

> 5、LVS、Nginx、HAproxy有什么区别?工作中你怎么选择?

> 6、Squid、Varinsh和Nginx有什么区别，工作中你怎么选择?

> 7、Tomcat和Resin有什么区别，工作中你怎么选择?

> 8、什么是中间件?什么是jdk?

> 9、讲述一下Tomcat8005、8009、8080三个端口的含义？

> 10、什么叫CDN?

> 11、什么叫网站灰度发布?

> 12、简述DNS进行域名解析的过程?

> 13、RabbitMQ是什么东西?

> 14、讲一下Keepalived的工作原理?

> 15、讲述一下LVS三种模式的工作过程?

> 16、mysql的innodb如何定位锁问题，mysql如何减少主从复制延迟?

> 17、如何重置mysql root密码?

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以点击这里获取！](https://bbs.csdn.net/topics/618635766)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以点击这里获取！](https://bbs.csdn.net/topics/618635766)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**