vue3中实现elementPlus表格选中行的上移下移-香港服务器租用

帮助文档

专业提供香港服务器、香港云服务器、香港高防服务器租用、香港云主机、台湾服务器、美国服务器、美国云服务器vps租用、韩国高防服务器租用、新加坡服务器、日本服务器租用一站式全球网络解决方案提供商!专业运营维护IDC数据中心,提供高质量的服务器托管,服务器机房租用,服务器机柜租用,IDC机房机柜租用等服务,稳定、安全、高性能的云端计算服务,实时满足您的多样性业务需求。香港大带宽稳定可靠，高级工程师提供基于服务器硬件、操作系统、网络、应用环境、安全的免费技术支持。

联系客服

vue3中实现elementPlus表格选中行的上移下移

发布时间：2024-03-03 04:28:45 分类：帮助文档

vue3中实现elementPlus表格选中行的上移下移先看效果：实现步骤： 1、给el-table添加current-change事件、高亮属性及ref属性 2、给上移下移按钮添加事件 // 定义当前选中的行参数 const currentRow = ref(null); // 定义表格的ref const singleTableRef = ref(); // 行选中事件 const handleCurrentChange = (val: any) => { currentRow.value = val; }; // curcelRight.value.fields是表格数据 // 上移事件 const upRow = () => { if (currentRow.value) { // 在表格数据中找到当前选中行的索引 let index = curcelRight.value.fields.findIndex((d: any) => d.code == currentRow.value.code); // 索引存在 if (index && index > 0) { // 则利用es6中的解构赋值来实现交换两元素的位置 [curcelRight.value.fields[index], curcelRight.value.fields[index - 1]] = [ curcelRight.value.fields[index - 1], curcelRight.value.fields[index], ]; } // setCurrentRow中传入当前行可以实现不清除选中效果，可以多次上移 singleTableRef.value.setCurrentRow(currentRow.value); } }; // 下移事件 const downRow = () => { if (currentRow.value) { let index = curcelRight.value.fields.findIndex((d: any) => d.code == currentRow.value.code); if (index + 1 != curcelRight.value.fields.length) { if (index > -1 && curcelRight.value.fields.length > 1) { [curcelRight.value.fields[index], curcelRight.value.fields[index + 1]] = [ curcelRight.value.fields[index + 1], curcelRight.value.fields[index], ]; } singleTableRef.value.setCurrentRow(currentRow.value); } } };

上一篇 WDS自动化批量部署Windows 10

下一篇 VsCode配置ssh免密远程连接服务器

HTTP1.0和HTTP1.1和HTTP2.0的主要区别重写Sylar基于协程的服务器（3、协程模块的设计）电信企业邮箱外贸怎么样 linux命令之crontab详解多台服务器怎么部署一个网站服务器感染了.mallox勒索病毒，如何确保数据文件完整恢复？ 4核16G幻兽帕鲁服务器优惠价格表，阿里云和腾讯云报价 kt机房的云主机怎么样解决问题：关于云服务器Linux在windows中telnet访问无法打开到主机的连接。在端口 23- 连接失败的问题

香港云服务器租用推荐

服务器租用资讯: ·git云服务器，git服务器管理工具; ·git服务器云服务，git服务器启动命令; ·git登录腾讯云服务器，github腾讯云函数部署; ·git本地服务器云服务器，git连接服务器; ·ftp怎么连接阿里云服务器，ftp怎么连接阿里云服务器网络; ·ftp链接阿里云服务器，ftp链接阿里云服务器怎么用; ·ftp连接云服务器，云服务器搭建ftp服务器; ·ftp连接阿里云服务器，阿里云虚拟主机ftp无法连接; ·ftp服务器云服务器，ftp服务器云服务器怎么用

服务器租用推荐: ·美国服务器租用; ·台湾服务器租用; ·香港云服务器租用; ·香港裸金属服务器; ·香港高防服务器租用; ·香港服务器租用特价