先上效果图
先说下难点在哪
- 不知道用什么插件,显示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)
}