先上效果图
先说下难点在哪
- 不知道用什么插件，显示css层面样式
- 列表是一个JSon
- element多选框绑定值只能是普通数组（可以绑定对象，但是无法回显）
- 拖拽后如何影响到多选框绑定值的数据的顺序的
思路
- 先准备好一个全量的JSon列表数据alldata
eg:[ {label:‘学员姓名’，val:‘studentname’}…] - 在准备一个默认显示表头的JSon数据nowdata（即目前展示的表头）
- 把这两传给子弹窗，子弹窗监听目前展示的表头nowdata，利用map（）转普通数组arry
- 这个普通数组arry就是多选框绑定的，就会默认勾选上了
- 多选框选项来自alldata (其实是copydata，接着看)
- 引入插件，插件绑定的是一个Json,拖拽后可以修改Json中对象的顺序（插件的功能）
- 复制一份alldata,因为不能直接修改props的值----->copyalldata
- 插件绑定copyalldata，监听copyalldata，选项有改动时候，会map()转普通数组，赋给arry
- 点击确认把arry转Json，覆盖掉nowdata即可
- v- for nowdata 遍历表头<el- table-column
- 勾选一大堆后，点击取消是需要恢复原样的，记得备份
就是这么乱，做起来更乱的，一开始我知道这组件也觉得简单，还是有点考验思路清晰滴
关键代码
npm引入和使用插件draggable
不需要再data(){ return } 中声明drag的
import draggable from 'vuedraggable'
<el-checkbox-group v-model="arry">
<draggable v-model="copydata" :options="{group: 'label'}" @start="drag=true" @end="drag=false">
<el-col :span="20" v-for="x in copydata" :key="x.val">
<!-- 不支持绑定对象 -->
<el-checkbox :label="x.val" >{
{
x.label}}</el-checkbox>
</el-col>
</draggable>
</el-checkbox-group>
Json转普通数组
我多选框绑定的是表头的字段名，监听里面用到
this.arry= newVal.map(item => item.val)
数组转JSon，勾选好了点确认才触发
let newnowdata=[]
this.alldata.foreach(el=>{
if(this.arry.includes(el.val)
newnowdata.push(el)
}