how do you drag the columns with element-ui-el-table-draggable, 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)
    }
  })
  }