技术标签: 1024程序员节 web elementUI elementui 前端 vue.js
在实现element table多选分页回显功能时遇到了很多问题,这里主要记录与分享一下改功能遇到的问题和解决方法。
https://blog.csdn.net/xuelong5201314/article/details/132730937
一些小的问题这里不做记录(单词错误、大小写等)
这里注意问题部分只讲遇到问题的代码,不贴全部代码,完整的代码请参考已完成的element table多选分页回显功能
问题代码:
// 是否全选
selectAll(arr) {
this.selectUsers = arr
},
问题原因:
因为是分页回显,所有不能使用直接覆盖,应该判断是否为全选或取消全选,并且根据判断写对应的逻辑
正确代码:
// 是否全选
selectAll(arr) {
if (arr.length !== 0) {
// 全选
arr.forEach(item => {
// some() 方法用于判断数组中是否存在某元素,参数是function,返回值是true或false,存在返回true 否则返回false
const bool = this.selectUsers.some(user => user.id === item.id)
if (!bool) {
// 不存在添加
this.selectUsers.push(item)
}
})
} else {
// 取消全选
this.allUsers.forEach(item => {
this.selectUsers = this.selectUsers.filter(user => user.id !== item.id)
})
}
},
选中数据时正常,切换分页后数据不回显
问题代码:
// 分页按钮
handleCurrentChange(val) {
...
this.allUsers = res.data
this.echoSelected()
...
},
// 回显选中
echoSelected() {
if (this.selectUsers.length > 0) {
this.allUsers.forEach(item => {
if (this.selectUsers.some(user => user.id === item.id)) {
// 存在添加
this.$refs.multipleTable.toggleRowSelection(item)
}
})
}
},
问题原因:
代码执行太快,数据还未刷新就设置选中,导致无法回显问题
使用this.$nextTick()方法,在下次 DOM 更新循环结束之后执行延迟回调。
正确代码:
// 回显选中
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)
}
})
})
}
},
选中第一页数据,切换其他页面时回显正常
点击移除右侧数据时,左侧变异常
问题代码:
// 移除
deleteUser(node) {
this.selectUsers = this.selectUsers.filter(user => user.id !== node.id)
this.toggleSelection(this.selectUsers)
},
toggleSelection(arr) {
// 先清空
this.$refs.multipleTable.clearSelection()
if (arr.length > 0) {
arr.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row)
})
}
},
解决方法看问题四
选中第一页前三条数据后,选择第二页在回到第一页,这时是正常回显的
当点击移除右侧选中的数据时左侧数据未删除
问题代码:
// 移除
deleteUser(node) {
this.selectUsers = this.selectUsers.filter(user => user.id !== node.id)
this.$refs.multipleTable.toggleRowSelection(node, false)
},
问题原因:
这里主要原因是 this.$refs.multipleTable.toggleRowSelection(node, false) 中的node指向,
上面代码中的node是指向this.selectUsers的,也就是说node是属于this.selectUsers的,
这时将node传给this.$refs.multipleTable,this.$refs.multipleTable也想选中对应的数据,奈何他找不到啊。
解决方法
先移除this.selectUsers中的元素,在遍历this.allUsers判断this.selectUsers与this.allUsers中的id是否相同,
相同选中(这里选中的参数是传this.allUsers的!!!!!!)
正确代码:
// 移除
deleteUser(node) {
// filter方法不懂的可以百度一下哈
this.selectUsers = this.selectUsers.filter(user => user.id !== node.id) // 这时返回删除后的数组
// 遍历this.allUsers,这时item是指向this.allUsers, node是指向this.selectUsers的
this.allUsers.forEach(item => {
if (node.id === item.id) {
// 存在添加
// toggleRowSelection方法两个参数,第一个参数必填,第二个参数选填
// 只填第一个参数时,如果第一个参数未选中,则选中;如果是选中的,则取消选中
// 第二个参数:false是取消选中,true是选中
// 注意第一个参数一定是item,是指向你要操作的表格数据,如果是指向其他数据是无效的
this.$refs.multipleTable.toggleRowSelection(item, false)
}
})
},
其他大的问题不记得了,如果想起来在加
文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib
文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang
文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些
文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器
文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距
文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器
文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn
文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios
文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql
文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...
文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120
文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数