ElementuiPlus的table组件实现行拖动与列拖动

借助了插件sortablejs。这种方法只适合做非树状table。如果想实现树状table,并且可拖动。可以试一下aggridVue3这个插件

javascript 复制代码
<template>
  <div class="draggable" style="padding: 20px">
    <el-table row-key="id" :data="tableData" style="width: 100%">
      <el-table-column v-for="(item, index) in oldList" :key="`col_${index}`" :prop="newList[index].prop"
        :label="item.label" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import Sortable from 'sortablejs'
import { onMounted, ref } from 'vue'

// 只适合做平级的table行和列拖动

const oldList = ref()
const newList = ref()

// 表头
const tableItems = ref([
  {
    label: '姓名',
    prop: 'name',
  },
  {
    label: '性别',
    prop: 'gender',
  },
  {
    label: '年龄',
    prop: 'age',
  },
])

// 表体数据
const tableData = ref(
  [
    {
      id: 1,
      name: '李四',
      gender: '男',
      age: 20,
    },
    {
      id: 2,
      name: '王五',
      gender: '未知',
      age: 18,
    },
    {
      id: 3,
      name: '张三',
      gender: '男',
      age: 22,
    },
  ]
)

// 行拖拽
const rowDrop = function () {
  // 要拖拽元素的父容器 tbody
  const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody')
  Sortable.create(tbody, {
    //  可被拖拽的子元素
    draggable: ".draggable .el-table__row",
    onEnd({ newIndex, oldIndex }) {
      // newIndex 拖动到的新的索引
      // oldIndex 没拖动前的索引
      const currRow = tableData.value.splice(oldIndex, 1)[0]
      tableData.value.splice(newIndex, 0, currRow)
    }
  });
}

// 列拖拽
const columnDrop = function () {
  // 要拖拽元素的父容器 头部的tr
  const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr');
  Sortable.create(wrapperTr, {
    animation: 180,
    delay: 0,
    onEnd: (evt: any) => {
      const oldItem = newList.value[evt.oldIndex];
      newList.value.splice(evt.oldIndex, 1);
      newList.value.splice(evt.newIndex, 0, oldItem);
    }
  })
}

onMounted(() => {
  oldList.value = JSON.parse(JSON.stringify(tableItems.value))
  newList.value = JSON.parse(JSON.stringify(tableItems.value))
  columnDrop()
  rowDrop()
})
</script>

效果如下

我试了加操作列,通过el-table-column的默认插槽进行实现,但是列拖动的时候,操作列的内容一直在最后一列,并没有跟着移动

代码如下,如果不需要列拖动的话,可以采取这种方式

javascript 复制代码
<template>
  <div class="draggable" style="padding: 20px">
    <el-table row-key="id" :data="tableData" style="width: 100%">
      <el-table-column v-for="(item, index) in oldList" :key="`col_${index}`"
        :label="item.label" align="center">
        <template #default="{ row, column, $index }">
          <div v-if="column.label !== '操作'">
            {{ row[newList[index].prop] }}
          </div>
          <div v-else>
            <el-button size="small">操作</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import Sortable from 'sortablejs'
import { onMounted, ref } from 'vue'

// 只适合做平级的table行和列拖动

const oldList = ref()
const newList = ref()

// 表头
const tableItems = ref([
  {
    label: '姓名',
    prop: 'name',
  },
  {
    label: '性别',
    prop: 'gender',
  },
  {
    label: '年龄',
    prop: 'age',
  },
  {
    label: '操作',
    prop: 'operate',
  },
])

// 表体数据
const tableData = ref(
  [
    {
      id: 1,
      name: '李四',
      gender: '男',
      age: 20,
    },
    {
      id: 2,
      name: '王五',
      gender: '未知',
      age: 18,
    },
    {
      id: 3,
      name: '张三',
      gender: '男',
      age: 22,
    },
  ]
)

// 行拖拽
const rowDrop = function () {
  // 要拖拽元素的父容器 tbody
  const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody')
  Sortable.create(tbody, {
    //  可被拖拽的子元素
    draggable: ".draggable .el-table__row",
    onEnd({ newIndex, oldIndex }) {
      // newIndex 拖动到的新的索引
      // oldIndex 没拖动前的索引
      const currRow = tableData.value.splice(oldIndex, 1)[0]
      tableData.value.splice(newIndex, 0, currRow)
    }
  });
}

// 列拖拽
const columnDrop = function () {
  // 要拖拽元素的父容器 头部的tr
  const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr');
  Sortable.create(wrapperTr, {
    animation: 180,
    delay: 0,
    onEnd: (evt: any) => {
      const oldItem = newList.value[evt.oldIndex];
      newList.value.splice(evt.oldIndex, 1);
      newList.value.splice(evt.newIndex, 0, oldItem);
    }
  })
}

onMounted(() => {
  oldList.value = JSON.parse(JSON.stringify(tableItems.value))
  newList.value = JSON.parse(JSON.stringify(tableItems.value))
  columnDrop()
  rowDrop()
})
</script>

还有一种解决办法就是,把操作放到弹窗操作,比如双击某一行的时候,弹出弹窗,传入这行的数据,在弹窗里面进行操作,这样就不需要添加操作内一列了。行拖动和列拖动也都能使用

相关推荐
quan263110 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)1 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web