您如何使用 element-ui-el-table-draggable、Element UI 拖动列？答案

【问题标题】：how do you drag the columns with element-ui-el-table-draggable, Element UI?您如何使用 element-ui-el-table-draggable、Element UI 拖动列？
【发布时间】：2020-06-10 01:43:45
【问题描述】：

我正在使用插件：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'
            }],
   }
}

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

【问题讨论】：

你有类handle不仅有div元素，还有el-table-column的组件。可能有问题？
我已经改变了它，但它对我也不起作用，我把它单独留在了 div 中，它不起作用，我把它留在了 el-table-column它也不起作用
您是否尝试从 github 文档中运行示例？我说的是这里的一个例子 - github.com/WakuwakuP/element-ui-el-table-draggable
该示例适用于我，但我只拖动行并且我想拖动列。

标签： element-ui vuedraggable

【解决方案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)
    }
  })
  }

【讨论】：