style:拖动

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-09-13 10:18:32
+ * @LastEditTime: 2023-09-13 10:33:50
 -->
 <template>
   <div class="clmlmx-box">
@@ -9,7 +9,7 @@
       <el-button type="primary" icon="el-icon-top">上移</el-button>
       <el-button type="primary" icon="el-icon-bottom">下移</el-button>
     </div>
-    <lb-table :column="column" :key="key" :heightNumSetting="true" :calcHeight="600"
+    <lb-table :column="column" :key="key" row-key="bsmSj" ref="listTable" :heightNumSetting="true" :calcHeight="600"
       :pagination="false" :data="tableData">
     </lb-table>
     <div class="text-center">
@@ -35,6 +35,7 @@
     data () {
       return {
         loading: false,
+        sortable: null,
         column: [
           {
             label: "选择",
@@ -168,6 +169,11 @@
     mounted () {
       this.initSort()
     },
+    beforeDestroy () {
+      if (this.sortable) {
+        this.sortable.destroy();
+      }
+    },
     methods: {
       handleSubmit () {
         this.loading = true
@@ -219,7 +225,6 @@
        * @description: 材料目录删除
        * @param {*} index
        * @param {*} row
-       * @author: renchao
        */
       handleDelete (index, row) {
         if (row.children.length > 0) {
@@ -240,47 +245,15 @@
         })
       },
       initSort () {
-        const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
-        // const sortable = new Sortable(el, options);
-        // 根据具体需求配置options配置项
-        const sortable = new Sortable(el, {
-          onEnd: (evt) => { // 监听拖动结束事件
-            console.log(this) // this是当前vue上下文
-            console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
-            console.log(evt.newIndex) // 当前行的被拖拽后的顺序
-            // 这里就可以写我们需要传给后台的逻辑代码
-            // 我们有了 evt.oldIndex 和 evt.newIndex 这两个参数做索引，我们可以根据绑定在表格上面的 data 这个 Array 找到两个相应的记录。就可以针对数据进行操作啦。
-            // 下面将拖拽后的顺序进行修改
-            const currRow = this.tableData.splice(evt.oldIndex, 1)[0]
-            this.tableData.splice(evt.newIndex, 0, currRow)
-            const newData = []
-            this.tableData.forEach((item, index) => {
-              newData[index] = {
-                id: item.id,
-                rank: index + 1
-              }
-            })
-            // 下面是将排序结果更新到数据库中，根据自己项目的逻辑进行实现即可。
-            const data = {
-              id: this.$route.params.id,
-              datas: {
-                streams: newData
-              }
-            }
-            this.$store
-              .dispatch('user/setMultiSort', data)
-              .then((res) => {
-                if (res.code === 200) {
-                  this.$message.success('排序修改成功')
-                  // 修改成功后重新获取列表数据更新
-                  this.getMultiLiveList()
-                } else {
-                  this.$message.error('排序修改失败')
-                }
-              })
-              .catch((e) => {
-                console.log(e)
-              })
+        const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+        this.sortable = Sortable.create(el, {
+          ghostClass: 'sortable-ghost',
+          setData: function (dataTransfer) {
+            dataTransfer.setData('Text', '')
+          },
+          onEnd: evt => {
+            const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
+            this.tableData.splice(evt.newIndex, 0, targetRow);
           }
         })
       }