表格拖拽排序

 <table style="width: 100%" ref="ruleTable">
        <thead>
          <tr>
            <th class="switch" style="width: 275px;line-height: 20px;
    right: 56px;">优先级至上而下递减，上下拖动进行排序</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td class="switch">
              <el-switch> </el-switch>
            </td>
          </tr>
        </tbody>
      </table>

import Sortable from 'sortablejs'
mounted () {
    this.rowDrop()
  },
methods: {
    // 行拖拽
    rowDrop () {
      const el = this.$refs.ruleTable.querySelectorAll('table > tbody')[0]
      // 顺序调整
      Sortable.create(el, {
        onEnd: evt => {
          if (evt.newIndex === evt.oldIndex) {
            return
          }
          var arr = JSON.parse(JSON.stringify(this.tableData)) // 获取表数据
          var p1 = arr[evt.oldIndex] // 拖动项
          var p2 = arr[evt.newIndex] // 被占用项
          this.$http({
            url: '',
            method: 'post',
            data: this.$http.adornData(
          [p1, p2],
        false
      )
          }).then(({ data }) => {
            if (data && data.Result === true) {
            // 拖动后更新 解决多次调整显示顺序错误BUG
              this.tableData = []
              this.$nextTick(() => {
                this.tableData = data.Data
              })
            }
          })
        }
      })
    }
  }