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

效果

安装

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; /* 例如，活动状态的颜色 */
}

到此这篇关于sortable中el-table拖拽及点击箭头上下移动row的文章就介绍到这了,更多相关sortable el-table拖拽内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

JavaScript中Blob的具体实现

常用于处理文件数据、图像数据、音频数据等。blob对象通常用于在客户端处理文件，如上传文件、下载文件、处理图像等操作。blob对象可以通过blob构造函数创建，... [阅读全文]

TypeScript实现单链表的示例代码

链表的概念链表是一种物理存储单元上非连续、非顺序的存储结构，它由一系列结点组成，其特点在于结点可以在运行时动态生成。链表的存储结构特点链表的每个结点包括两个部分：一个是存储数据元素…

2024年09月06日 • 编程语言

JavaScript判断两个对象是否相等的方法总结

1.使用===操作符在 javascript 中，===操作符用于严格比较两个值，包括对象。对于对象，===比较的是对象的引用，而不是对象的内容。这意味着只有当... [阅读全文]

Typescript实现队列的示例代码

队列的概念队列是一个先进先出（fifo）的数据结构。由于ts中没有队列，所以我们使用数组来模拟一个队列并实现队列的所有功能。队列的操作enqueue(eleme... [阅读全文]

Java Script网页设计案例详解

1. javascript网页设计案例下面我将提供一个简单的javascript网页设计案例，该案例将实现一个动态的待办事项列表（todo list）。用户可以... [阅读全文]

Typescript实现栈的方法示例

栈的概念栈（stack）：是只允许在一端进行插入或删除的线性表。首先栈是一种线性表，但限定这种线性表只能在某一端进行插入和删除操作。此外，栈还遵循后进先出（li... [阅读全文]


验证码：

验证码：

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

2024年09月06日 • Javascript •我要评论

相关文章:

TypeScript实现单链表的示例代码

发表评论