Vue customize the number of table headers, drag and drop to adjust the order of headers draggable

First on the renderings

Let me talk about the difficulty first

• I don’t know what plug-in to use to display css level style
• List is a JSon
• The bound value of the element checkbox can only be a normal array (objects can be bound, but they cannot be echoed)
• How to affect the order of the data bound to the multiple selection box after dragging

Ideas

1. First prepare a full amount of JSon list data alldata
   eg:[ {label:'student name', val:'studentname'}...]
2. Prepare a JSon data nowdata that displays the header by default (that is, the header currently displayed)
3. Pass these two to the bullet window, the bullet window monitors the currently displayed header nowdata, and use map() to transfer the ordinary array arry
4. This ordinary array arry is bound to the checkbox, and it will be checked by default
5. The checkbox option comes from alldata (actually copydata, let’s see)
6. Introduce the plug-in, the plug-in is bound to a Json, and the order of the objects in the Json can be modified after dragging (the function of the plug-in)
7. Copy a copy of alldata, because you cannot directly modify the value of props----->copyalldata
8. The plug-in binds copyalldata and monitors copyalldata. When the options are changed, map() will be converted to a normal array and assigned to arry
9. Click OK to transfer arry to Json and overwrite nowdata
10. v- for nowdata traverse the table header<el- table-column
11. After checking a lot, click Cancel to restore to the original state, remember to backup

It's just so messy, and it's more messy to do. At first I knew that this component also felt simple, but it was still a bit of a test. The thinking was clear.

Key code

npm introduces and uses the plug-in draggable
without the need to declare drag in data(){ return}

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 to ordinary array
My multi-select box is bound to the field name of the header, which is used in the monitor

this.arry= newVal.map(item => item.val)

Array to JSon, click to confirm to trigger

let newnowdata=[]
this.alldata.foreach(el=>{
    
    
	if(this.arry.includes(el.val)
	newnowdata.push(el)
}

Wake up, everyone’s projects are different, there is no one-click copy of the code~~