快捷導(dǎo)航

sortable中el-table拖拽及點(diǎn)擊箭頭上下移動(dòng)row效果

更新時(shí)間：2024年08月26日 10:08:52 作者：初七初七

這篇文章主要介紹了sortable中el-table拖拽及點(diǎn)擊箭頭上下移動(dòng)row效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

效果

安裝

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>

點(diǎn)擊箭頭加顏色

.active {
  color: #009688; /* 例如，活動(dòng)狀態(tài)的顏色 */
}

到此這篇關(guān)于sortable中el-table拖拽及點(diǎn)擊箭頭上下移動(dòng)row的文章就介紹到這了,更多相關(guān)sortable el-table拖拽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: