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>

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

相关推荐
学习前端的小z几秒前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴4 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁24 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜24 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish26 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple26 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five27 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫54127 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.28 分钟前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普28 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5