实现简单的element-table的拖拽效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现简单的element-table的拖拽效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一步，先随便创建element表格

    <el-table ref="dragTable" :data="tableData" style="width: 100%" border fit highlight-current-row>
      <el-table-column label="日期" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="拖拽">
        <template>
          <i style="cursor: pointer;" class="el-icon-setting"></i>
        </template>
      </el-table-column>
    </el-table>

第二步，里面的数据源tableData直接复制饿了么上的

第三步，需要安装sortablejs库并且在头部引入

import Sortable from 'sortablejs'

第四步，通过ref获取table，这里给table的ref设置为dragTable

实现简单的element-table的拖拽效果,VUE,vue.js,elementui

第五步，就是获取table然后设置它的一些属性，比如拖拽时的CSS，拖拽时的一些事件等，然后需要注意的是需要再生命周期函数mounted里调用这个方法，因为这个方法可以获取dom

  data() {
    return {
      sortable: null,
    };
  },
  mounted() {
    this.dragTable()
  },

  methods: {
    dragTable() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        onEnd: () => {
          alert('成功')
        }
      })
    }
  },