elementui可拖动-ElementUI el-table + 可排序

2023-09-01 0 7,954 百度已收录

由于项目需要,需要实现表格行的拖拽,但ElementUI表格组件没有提供此功能。 查阅了资料,打算引入Sortable.js(一个轻量级的拖拽排序列表js插件)来实现。

1.npm安装及介绍

然后可以在main.js或者需要使用拖拽功能的.vue文件中引入

2.HTML部分

3.js部分

首先不要忘记第1步的介绍,然后在页面渲染完成后调用拖放方法。 如果您要在弹出窗口中更改/添加表格,则可以在打开新建/修改弹出窗口后调用拖放方法。

至此elementui可拖动,后台页面的表格拖拽功能就可以实现了(只有刷新列表后,表格还是拖拽前的顺序)。 如果刷新后想记住拖动后的顺序,就需要后台的配合。

另外,开发过程中遇到了一个问题,在此记录一下

如果表格使用拖放功能,则在选择单元格内容时直接执行拖放方法,导致用户难以复制表格内容。

例如,用户需要复制某行的“公式名称”,但未能选择该行进行复制。

后来发现通过设置一个属性就可以轻松完成。

通过以上设置,可以实现在选择“公式名称”栏时不触发拖拽麻烦的选择。

如果您有更好的意见elementui可拖动,欢迎交流、沟通。 好记性不如烂笔。 希望我的记录也能帮到你!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 elementui elementui可拖动-ElementUI el-table + 可排序 https://www.wkzy.net/game/186965.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务