element ui el-transfer增加拖拽功能(sortablejs)

1.下载并安装 sortablejs

npm install sortablejs

2.HTML 部分

 <template>
  <el-transfer ref="transfer" id="transfer" v-model="value" :data="data">
   <span slot-scope="{ option }" :draggable="!option.disabled"  @dragstart="drag($event,option)">{{ option.id}} - {{ option.label }}</span>
  </el-transfer>
</template>``

3.methods方法

<script>
import Sortable from 'sortablejs'
methods: {
    drag(ev,option) { 
       this.draggingKey = option.id
       const transfer = this.$refs.transfer.$el
       const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
       const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
       const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]
       Sortable.create(rightEl,{
          onEnd: (evt) => {
            const {oldIndex,newIndex} = evt;
            this.tableData.splice(newIndex,0,this.tableData.splice(oldIndex, 1)[0])
          }
        })
    }
}
</script>