element table结合sortablejs、vuedraggable实现表格表头拖拽、隐藏显示操作_vuedraggable 与element ui table结合

效果如下：

需求介绍

实现表格表头字段内容可选、顺序可调功能

技术准备

1.Sortable.js是一款轻量级的拖放排序列表的js插件
2.Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

实现过程

<draggable v-model="tableTitle" filter='.gg'>
                        <div class="drag_item"  v-for="(item, index) in tableTitle"
                            @mouseenter="mouseenter(index,item)" @mouseleave="mouseleave(index,item)" :key="index"
                            :class="[item.label=='VIN'|| item.label=='是否开通车联网'? 'gg' : '',item.isshow?'':'bag']">
                            <el-checkbox  @change="rowCorrect" style='width:100%'
                                v-model="item.isshow">{{
                                item.label }}</el-checkbox>
                            <i v-if='curIndex==index&&index>1' style='margin-top:7px;'
                                class="el-icon-s-operation"></i>
                        </div>
 </draggable>
1
2
3
4
5
6
7
8
9
10
11

tabletitle：表头信息
v-model：对应表头tabletitle
filter：不能拖拽项，接收class

总结，利用Draggable的拖拽能力，实现对表头对象的动态控制