vex-table 实现 表格拖动 && 行拖拽

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

你可能感兴趣的:(vxe-table)