如何拖动元素-ui-el-table-可拖动的列，元素UI？

Question

我正在使用插件：https://github.com/WakuwakuP/element-ui-el-table-draggable 但我只看到一个拖动字段的例子。

 <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>

在我的模型中是这样的：

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'
            }],
   }
}

我正在将句柄 class 应用到包含的 div 但它对我不起作用，我该如何拖动列？

Answer 1

这对我有用

    <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)
    }
  })
  }

如何拖动元素-ui-el-table-可拖动的列，元素UI？

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

element-ui

vuedraggable