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

于 2024-05-15 06:01:34 发布
阅读量337 收藏 5
点赞数 4
分类专栏： 2024年程序员学习 文章标签： 运维 linux 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84139728/article/details/138885956
版权

最全的Linux教程，Linux从入门到精通

======================

  1. linux从入门到精通(第2版)

  2. Linux系统移植

  3. Linux驱动开发入门与实战

  4. LINUX 系统移植 第2版

  5. Linux开源网络全栈详解 从DPDK到OpenFlow

华为18级工程师呕心沥血撰写3000页Linux学习笔记教程

第一份《Linux从入门到精通》466页

====================

内容简介

====

本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第1版出版后曾经多次印刷，并被51CTO读书频道评为“最受读者喜爱的原创IT技术图书奖”。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。本书附带1张光盘，内容为本书配套多媒体教学视频。另外,本书还为读者提供了大量的Linux学习资料和Ubuntu安装镜像文件，供读者免费下载。

华为18级工程师呕心沥血撰写3000页Linux学习笔记教程

本书适合广大Linux初中级用户、开源软件爱好者和大专院校的学生阅读，同时也非常适合准备从事Linux平台开发的各类人员。

需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论

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

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

一个人可以走的很快，但一群人才能走的更远！不论你是正从事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)
        }
      })
    },


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


最全的Linux教程，Linux从入门到精通

======================

1.  **linux从入门到精通(第2版)**

2.  **Linux系统移植**

3.  **Linux驱动开发入门与实战**

4.  **LINUX 系统移植 第2版**

5.  **Linux开源网络全栈详解 从DPDK到OpenFlow**



![华为18级工程师呕心沥血撰写3000页Linux学习笔记教程](https://img-blog.csdnimg.cn/img_convert/59742364bb1338737fe2d315a9e2ec54.png)



第一份《Linux从入门到精通》466页

====================

内容简介

====

本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第1版出版后曾经多次印刷，并被51CTO读书频道评为“最受读者喜爱的原创IT技术图书奖”。本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。本书附带1张光盘，内容为本书配套多媒体教学视频。另外,本书还为读者提供了大量的Linux学习资料和Ubuntu安装镜像文件，供读者免费下载。



![华为18级工程师呕心沥血撰写3000页Linux学习笔记教程](https://img-blog.csdnimg.cn/img_convert/9d4aefb6a92edea27b825e59aa1f2c54.png)



**本书适合广大Linux初中级用户、开源软件爱好者和大专院校的学生阅读，同时也非常适合准备从事Linux平台开发的各类人员。**

> 需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论




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

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

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_84139728
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Redis建议不开启透明大页的原因
Arkay_Zheng的博客
07-07 2230
注意：本博客提出的一切观点，均不能保证完全正确，希望能有更多的人参与探讨！ 在Redis的启动日志中，常能看见以下的告警： WARNING you have Transparent Huge Pages (THP) support enabled in your kernel. This will create latency and memory usage issues with Redis. To fix this issue run the command 'echo never > /s
启动redis报错：WARNING you have Transparent Huge Pages (THP) support enabled in your kernel
weixin_70379904的博客
07-21 1432
linux上安装redis，启动后报错，redis日志很清楚的告诉了解决方法，按照日志走，很快地解决了问题
linux使用yum源安装nginx
weixin_51680088的博客
10-07 4127
linux使用yum源安装nginx
el-table分页多选及回显
最新发布
四木的博客
05-13 1562
使用element的table组件完成表格的分页多选与数据回显
如何在uni-app中使用vant组件？
xfWgaoqiang的博客
05-31 3697
在我们刚才新建的wxcomponents 目录下新建一个 @vant 的文件夹，建立目录方法就和步骤三一样，只不过这一次我们要在 wxcomponents 目录下建立 子目录 @vant。再多提一嘴，vant组件是配合原生小程序使用的，所以有些地方，比如data数据渲染，我们不能直接照抄，一般用vue的思路就可以解决啦。那我们这样创建文件夹，和它嵌套的路径一样，是不是后面使用复制vant 提供的路径就OK了？填写项目名称，选择模板，vue技术栈，…最后说明一下前面文件夹的命名方式的由来。
【uni-app导入vant】
热门推荐
qq_45772997的博客
04-11 1万+
uni-app导入vant方法
解决element ui select下拉框不回显数据问题的解决
10-17
1. **检查数据类型**：首先，确认下拉框`el-option`的`value`与`v-model`绑定的值类型是否一致。在这个例子中，可能是ID的类型不匹配，例如一个是字符串，另一个是数字。确保两者类型相同，可以将后端返回的数据类型...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
在本文中，我们将深入探讨Element-UI框架中的级联菜单（Cascader）组件，特别是在实现城市三级联动菜单以及处理回显问题时所遇到的技术细节。Element-UI是一款基于Vue.js的高质量UI组件库，提供了丰富的组件供开发者...
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在开发Web应用时，Element-UI是一个非常流行的前端组件库，它提供了丰富的UI元素和功能。在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。...
如何用vscode远程连接Linux服务器
这是一个非常有意思的博主
10-14 2257
一分钟学会如何用vscode远程连接Linux服务器
Linux安装Nginx（超详细）
m0_57722717的博客
08-11 459
【代码】Linux安装Nginx（超详细）
nginx配置https
恋上、小幸福的博客
08-10 625
现在你的 Nginx 配置了 HTTPS 支持。当访问你的域名时，Nginx 将使用 SSL/TLS 加密来处理连接。确保在浏览器中检查网站是否正常加载，并且浏览器显示了安全锁图标，表示连接是加密的。/path/to/your_domain.crt 和 /path/to/your_domain.key：替换为你的证书和私钥文件的路径。确保你的服务器防火墙允许入站和出站的 HTTPS 流量（通常是端口 443）。your_domain.com：你的域名或服务器 IP 地址。
Nginx配置https
mocoll的博客
03-04 2008
然后找到压缩包选择nginx的将这两个传到服务器中的conf目录下，当然，可以传到其他目录，只需要修改一下配置文件的路径就行。
uni-app导入vant(上干货)
weixin_71879136的博客
03-10 2475
uni-app导入vant(上干货)
Nginx配置HTTPS
hws_0910的博客
01-11 1252
Nginx配置https，nginx增加模块
vscode远程连接服务器
qq_42537872的博客
06-07 1543
最近在跑深度学习配准代码的时候，需要使用到服务器，而常规进行远程服务器开发的时候，经常性的操作是:使用本地的windows 10和cmd终端 使用ssh远程连接服务器，然后有文件需要交互的时候，使用的是winscp来传东西。这样导致的后果就是，远程改代码的时候非常麻烦，需要在本地改好，然后用winscp传到远程服务器，在运行，导致非常不好调试。
Nginx配置https网站
CCH2024的专栏
03-02 4858
Nginx配置https网站
【Linux】VScode远程连接Linux
AAlykk的博客
04-27 1135
作者：დ旧言~> 座右铭：松树千年终是朽，槿花一日自为荣。> 目标：自己能实现VScode远程连接Linux> 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安!​。
element-plus el-table 多选数据回显
10-20
在使用 element-plus 的 el-table 进行多选时，可以通过绑定一个对象来实现数据回显。具体实现方法如下： 1. 在获取表格数据时，将数据转化为一个以 id 为键，整个数据对象为值的字典对象。 2. 在获取回显数据时，将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值