vue3+elementuiplus+Sortable实现表格内容拖拽重新排序

注意事项
1、需要给表格加唯一的key :row-key=“getRowKey”
否则可能导致拖拽后明明数据已经改了，但是页面却没有变化
这个问题找了我超久！！！崩溃

2、需要使用nextTick()确保表格dom已经加载完毕
无论是在onMounted里或其他方法里，使用Sortable都需要获取表格dom，所以需要保证此时已经获取到表格dom了

此处我的表格是在弹窗里的，如果直接在页面上，那就在onMounted里调用nextTick()再调用setdayAdjustSort()即可

<el-button type="primary" plain @click="dayAdjust_open">当日调整</el-button>

    
<el-dialog v-model="dayAdjust.Visible" title="当日调整" width="800px">
      <div>
        <div style="display: flex">
          <div style="padding: 10px">日排版顺序</div>
          <div>
            <el-button type="primary" plain @click="dayAdjust_add_one">添加行</el-button>
          </div>
        </div>
        <div style="padding-left:90px">
          <el-table :data="dayAdjust.table_list" :row-key="getRowKey"  id="dayAdjust" border style="width: 100%" :height="300">
            <el-table-column prop="team_id" label="班组名称">
              <template #default="scope">
                <el-select v-model="scope.row.team_id" class="m-2" placeholder="" style="width: 100%;">
                  <el-option label="111" value="111" />
                  <el-option label="222" value="222" />
                  <el-option label="333" value="333" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="shift" label="固定班次时间">
              <template #default="scope">
                <el-select v-model="scope.row.shift" class="m-2" placeholder="" style="width: 100%;">
                  <el-option label="111" value="111" />
                  <el-option label="222" value="222" />
                  <el-option label="333" value="333" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="班次时长">
              <template #default="scope">
                <div>{{ scope.row.time }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="班次名称">
              <template #default="scope">
                <div>{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="dayAdjust_del_one(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dayAdjust.Visible = false">取消</el-button>
          <el-button type="primary" @click="dayAdjustSubmit">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

import { ref, onMounted, reactive, nextTick } from "vue";
import Sortable from 'sortablejs';

const dayAdjust = reactive({ // 当日调整
  Visible: false,
  table_list: [],
})

const getRowKey = row => {
  return row.new_id
}

// 当日调整的表格拖拽
const setdayAdjustSort = () => {
    const el = document.querySelector('#dayAdjust table tbody')
    console.log('el',el)
    new Sortable(el, {
      sort: true,
      ghostClass: 'sortable-ghost',
      onEnd: (e) => {
        const list = JSON.parse(JSON.stringify(dayAdjust.table_list))
        const targetRow = list.splice(e.oldIndex, 1)[0]
        list.splice(e.newIndex, 0, targetRow)
        dayAdjust.table_list = JSON.parse(JSON.stringify(list))

        console.log('dayAdjust.table_list',dayAdjust.table_list)
      },
    })
}

const dayAdjust_open = async () => {
  dayAdjust.Visible = true;
  await nextTick();
  setdayAdjustSort();
}

// 当日调整新增一行
const dayAdjust_add_one = () => {
  const param = {
    team_id: '',
    team_name: '',
    shift: '',
    time: '',
    name: '',
    new_id: new Date().getTime()
  }
  dayAdjust.table_list = [...dayAdjust.table_list, param]
}
// 当日调整删除一行
const dayAdjust_del_one = (row) => {
  const newData = dayAdjust.table_list.filter(item => item.new_id != row.new_id);
  dayAdjust.table_list = newData;
}
// 当日调整提交
const dayAdjustSubmit = () => {

}