Vue3+element plus实现table拖拽排序(基于Sortablejs)

引入依赖 sortablejs

npm install sortablejs --save 

• 1

2、引入sortablejs

import Sortable from 'sortablejs'

• 1

在文件中 加入   
declare module 'sortablejs'

• 1
• 2

<template>
  <el-drawer v-model="visible" @close = 'closeDrawer' :destroy-on-close="true" size="100%">
    <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              :data=""
              size="small"
              ref="dragTable"
              border>
      <el-table-column prop="jsonName"
                       label="源端字段名"
                       min-width="20%"></el-table-column>
      <el-table-column prop="columnName"
                       label="字段名"
                       min-width="20%">
        <template #default="scope">
          <el-input v-model="" placeholder="请输入字段名" />
          <!--                  <el-radio :disabled="=='TIMESTAMP'||=='DATE'?false:true" class="radio" v-model="templateSelection"  :label="+">&nbsp;</el-radio>-->
        </template>
      </el-table-column>

      <el-table-column
          label="字段长度"
          min-width="20%">
        <template #default="scope">
          <el-input-number v-model="" placeholder="请输入字段长度" :min="1" />
        </template>
      </el-table-column>
      <el-table-column
          label="字段类型"
          min-width="20%">
        <template #default="scope">
          <!--                  <el-input-number v-model="" placeholder="请输入字段大小" :min="1" />-->
          <fast-select v-model="" dict-type="column_type" placeholder="请选择" clearable></fast-select>
        </template>
      </el-table-column>
      <el-table-column label="主键" width="50" >
        <template #default="scope">
          <el-checkbox  v-model="" ></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch ,nextTick } from 'vue'
import Sortable from 'sortablejs'

const dataForm = reactive({
  restApiJsonMapper:[]
})
const visible = ref(false)
onMounted(() => {
  // initDropTable() // 表格拖动  不在弹窗里，在onMounted里面调用

})
const init = () => { // 打开弹窗
   = true
  =[
      {jsonPath:1,jsonName:111,columnName:111,columnLength:null,primaryKey:false,columnType:12},
      {jsonPath:2,jsonName:121,columnName:121,columnLength:null,primaryKey:false,columnType:12}
  ]
  nextTick(() => {

    initDropTable() // 表格拖动
  })
}
const dragTable = ref()

// 表格拖动
const initDropTable = () => {
  if(){

    const el = .$('.el-table__body tbody')
    (el)

    (el, {
      handle: '.el-table__row',
      onEnd: ({ newIndex, oldIndex }) => {
        (newIndex)
        const arr = 
        const currRow = (oldIndex, 1)[0]
        (newIndex, 0, currRow)
         = []
        nextTick(() => {
           = arr
        })
      }
    })
  }

}
defineExpose({
  init
})
</script>

<style scoped>

</style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99