how do you drag the columns with element-ui-el-table-draggable, Element UI? - element-ui

Question

I am using the plugin: https://github.com/WakuwakuP/element-ui-el-table-draggable
but I only see an example to drag the fields.
<el-table-draggable handle=".handle">
<el-table :data="tableData" :header-cell-class-name="headerRow">
<div class="handle">
<el-table-column prop="date" label="Fecha" class="handle">
<template slot-scope="scope">
<!-- <div class="handle"> -->
<label class="text-thicker">{{ scope.row.date}}</label>
handle
<!-- </div> -->
</template>
</el-table-column>
</div>
<el-table-column prop="name" label="Name">
<template slot-scope="scope">
<div>
<label class="text-thicker">{{ scope.row.name}}</label>
handle
</div>
</template>
</el-table-column>
</el-table>
</el-table-draggable>
and in the model I have it like this:
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}],
}
}
I am applying the handle class to a div that encloses but it doesn't work for me, how can I drag the columns?

Answer 1

this works for me
<el-table border :data="tableData" size="mini" >
<el-table-column
v-for="(item, index) in elTheadList"
:prop="dataTheadList[index]"
:label='item'
:key="`thead_${index}`"
>
</el-table-column>
</el-table>
data() {
return {
tableData: [{
date: '2016-05-01',
name: 'Cristian Millan',
address: 'Baja #11'
},{
date: '2016-05-02',
name: 'Jorge Cabrera',
address: 'Progreso #18'
},{
date: '2016-05-03',
name: 'Armando Mendivil',
address: 'Novena #12'
}],
dataTheadList: [
'date',
'name',
'address'
],
elTheadList: ['Date', 'Name', 'Address'],
}
},
mounted() {
const el = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(el, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dataTheadList[evt.oldIndex]
this.dataTheadList.splice(evt.oldIndex, 1)
this.dataTheadList.splice(evt.newIndex, 0, oldItem)
}
})
}