vue-element拖拽功能

vue-element拖拽功能

 <el-table
       ref="dragTableHead"
        class="addTable"
        :data="list"
        row-key="fieldId"
        empty-text="暂无数据"
        style="width: 100%"
        max-height="458px"
      >
        <el-table-column
          type="index"
          :index="indexMethods"
          label="序号"
          width="50"
        />
     <el-table-column
          property="fieldName"
          label="列名称"
          max-width="149"
        >
          <template slot-scope="scope">
            <span class="fieldName">{{ scope.row.fieldName }}</span>
          </template>
        </el-table-column>
</el-table>

import Sortable from 'sortablejs'
export default {
    data() {
        return {
            editTableList: [
                {
                  id: 1,
                  fieldId: 11,
                  fieldName: '内容',
                },
                {
                  id: 2,
                  fieldId: 12,
                  fieldName: '内容1'
                }
          ],
          sortable: null,
          list: null,
          oldList: [],
          newList: []
        }
    },
    created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.list = this.editTableList
      this.oldList = this.list.map(v => v.fieldId)
      this.newList = this.oldList.slice()
      this.$nextTick(() => {
        this.setSort()
      })
    },
    // 修改序号
    indexMethods(index) {
      if (index < 9) {
        index = '0' + (index + 1)
      } else {
        index = index + 1
      }
      return index
    },
    setSort() {
      const el = this.$refs.dragTableHead.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
          this.list.splice(evt.newIndex, 0, targetRow)
          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
        }
      })
    }
}