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; /* 例如,活动状态的颜色 */
}
相关推荐
Never_Satisfied32 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
ZHOUYUANN1 小时前
我用JavaScript复刻了某宝的小游戏动物大迁徙消消乐
前端·javascript·游戏开发
Asort2 小时前
JavaScript设计模式(十三)——责任链模式:构建灵活高效的请求处理链
前端·javascript·设计模式
摸着石头过河的石头2 小时前
JavaScript继承与原型链:揭开对象传承的神秘面纱
前端·javascript
用户6387994773052 小时前
我把我的 monorepo 迁移到 Bun,这是我的真实反馈
javascript·架构
用户57973883973152 小时前
JavaScript(Node.JS) 使自定义类可以通过下标访问内部可迭代值
javascript
博客zhu虎康2 小时前
Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox
javascript·vue.js·elementui
长明2 小时前
Electron 的西天取经
vue.js·electron
欧阳天2 小时前
http环境实现通知
前端·javascript
九十一2 小时前
Reflect 在 Vue3 响应式中作用
前端·vue.js