vue awe-dnd+ant 自定义表格排序显隐

最近发现一个挺好用的拖拽排序插件awe-dnd ，刚好又在学习ant design，所以萌发了让table表格可自定义位置和自定义显隐的想法，用了俩个多小时把这个想法实现了。

1. 先去安装awe-dnd , awe-dnd npm链接 ：https://www.npmjs.com/package/awe-dnd

$ npm install awe-dnd --save

2. 再mian.js中配置

//main.js
 
import VueDND from 'awe-dnd'
 
Vue.use(VueDND)

3. 在components 建一个drag文件夹 用来制作组件方便重复使用

 3.1 文件夹中新建drag.vue

//drag.vue

3.2再在文件夹下新建index.js 和drag.vue 保持一致

import Drag from './drag.vue'
export default Drag

4. 回到需要引入该组件的页面 我这里是table.vue

//table.vue

5.最终效果

 

6.该功能是基于awe-dnd插件和ant design 开发完成 ，以上drag组件也可使用于其他vue框架 如iview ，使用其他框架要遵循框架具体使用情况，需要保证drag组件绑定的onChange事件触发的回调函数中返回的数据val 适用于其余框架的table规范。