vex-table 实现 表格拖动 && 行拖拽
在项目开发中 用到 vex-table 表格插件
因为项目需要 所以要用到拖动功能 说实话个人认为 这个插件的功能还是蛮强大的 基本上 正常开发需要的功能都有 好了话不多说 直接介绍功能
该表格有两种体现形式 vxe-grid 和 vxe-table 这个两种 如果想提高页面渲染优化的 话建议使用 vxe-grid (本文使用的案例也是 vxe-grid)
本文以行拖拽为例
有几个重要属性 ref 和 row-key (ref 作用是找到对应的表格 row-key 的作用是 对应行的索引 在拖拽的时候找到对应的位置 )
其次是使用方法
在页面页面渲染之后就可以调用
本文因为项目特殊性 是在一个弹框里 进行拖动排序的
所以有点小坑 在这里强调一下 一定要在dom 显示之后在执行 拖动函数
否者函数就会因为找不到节点而报错 说的具体点就是 弹框在显示之后 在执行函数
这个描述的够具体了
最后是拖动函数
this.dataSource 对应的是表格中绑定的数据
注意 这个属性 对应的是 拖动单元格对应的class 属性 只有有这个属性才能拖动 至于设成什么样 看你 自己了
好了 这样 就可以 实现 行拖拽了