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; /* 例如,活动状态的颜色 */
}
相关推荐
前端小巷子6 分钟前
web实现文件的断点续传
前端·javascript·面试
jojo是只猫1 小时前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原13 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色13 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端