由于项目需要,需要实现表格行的拖拽,但ElementUI表格组件没有提供此功能。 查阅了资料,打算引入Sortable.js(一个轻量级的拖拽排序列表js插件)来实现。
1.npm安装及介绍
然后可以在main.js或者需要使用拖拽功能的.vue文件中引入
2.HTML部分
3.js部分
首先不要忘记第1步的介绍,然后在页面渲染完成后调用拖放方法。 如果您要在弹出窗口中更改/添加表格,则可以在打开新建/修改弹出窗口后调用拖放方法。
至此elementui可拖动,后台页面的表格拖拽功能就可以实现了(只有刷新列表后,表格还是拖拽前的顺序)。 如果刷新后想记住拖动后的顺序,就需要后台的配合。
另外,开发过程中遇到了一个问题,在此记录一下
如果表格使用拖放功能,则在选择单元格内容时直接执行拖放方法,导致用户难以复制表格内容。
例如,用户需要复制某行的“公式名称”,但未能选择该行进行复制。
后来发现通过设置一个属性就可以轻松完成。
通过以上设置,可以实现在选择“公式名称”栏时不触发拖拽麻烦的选择。
如果您有更好的意见elementui可拖动,欢迎交流、沟通。 好记性不如烂笔。 希望我的记录也能帮到你!