sortable中el-table拖拽及点击箭头上下移动row

效果

安装

复制代码
npm install sortablejs --save

引入

复制代码
import Sortable from "sortablejs";

 <el-table
        :data="tableBody"
        border
        ref="tableRef"
        :stripe="true"
        :key="tableKey"
      >
        <el-table-column type="index" label="排序" width="150" key="index" />
        <el-table-column prop="category" label="大类名称" key="category">
          <template #default="{ row, $index }">
            <div class="title">{{ row.category }}</div>
            <div class="icon">
              <el-icon
                :class="{ active: activeButton === `up-${$index}` }"
                @click="moveItem($index, 'up')"
                ><CaretTop
              /></el-icon>
              <el-icon
                :class="{ active: activeButton === `down-${$index}` }"
                @click="moveItem($index, 'down')"
                ><CaretBottom
              /></el-icon>
            </div>
          </template>
        </el-table-column>
      </el-table>

<script setup>
const activeButton = ref();
//行拖拽
    const rowDrop=()=> {
              const tbody = tableRef.value?.$el.querySelector(
      ".el-table__body-wrapper tbody"
    );
              Sortable.create(wrapperTr, {
      animation: 150,
      ghostClass: "blue-background-class",
      onEnd: async (evt: any) => {
        handleDragEnd(evt);
      },
    });
            }
const handleDragEnd = async (event: any) => {
  const { oldIndex, newIndex } = event;
  if (oldIndex !== newIndex) {
    const movedItem = tableBody.value.splice(oldIndex, 1)[0];
    tableBody.value.splice(newIndex, 0, movedItem);
    tableKey.value += 1;
    const url = "./?_m=&_a=";
    const formData = new FormData();
    formData.append("id", globalData.id);
    formData.append("category", movedItem.category);
    formData.append("xh", newIndex + 1);

    const response = await post(url, formData);
    if (response.code == 0) {
      ElMessage({
        showClose: true,
        message: "排序成功",
        type: "success",
      });
     
    }
  }
};

const moveItem = async (index: any, direction: any) => {
  const newIndex = direction == "up" ? index - 1 : index + 1;
  if (newIndex >= 0 && newIndex < tableBody.value.length) {
    const item = tableBody.value.splice(index, 1)[0];
    tableBody.value.splice(newIndex, 0, item);

    activeButton.value = `${direction}-${index}`;
    setTimeout(() => (activeButton.value = null), 200);

    const url = "./?_m=&_a=";
    const formData = new FormData();
    formData.append("id", globalData.id);
    formData.append("category", item.category);
    formData.append("xh", newIndex + 1);

    const response = await post(url, formData);
    if (response.code == 0) {
      ElMessage({
        showClose: true,
        message: "排序成功",
        type: "success",
      });
      
    }
  }
};
</script>

点击箭头加颜色

复制代码
.active {
  color: #009688; /* 例如,活动状态的颜色 */
}
相关推荐
字节跳跃者1 分钟前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者1 分钟前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端
用户38022585982430 分钟前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag34 分钟前
报错 400 和405解决方案
vue.js·spring boot
Web小助手39 分钟前
js高级程序设计(日期)
javascript
白杨木影子被拉长39 分钟前
多状态映射不同样式(scss语法)
vue.js·uni-app
Web小助手39 分钟前
js高级程序设计(4/5章节)
javascript
山有木兮木有枝_41 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
十盒半价41 分钟前
从递归到动态规划:手把手教你玩转算法三剑客
javascript·算法·trae
Web小助手1 小时前
js高级程序设计(1/2章节)
javascript