vue3 + element plus实现树状表格无线层级拖拽功能

wzw60606

已于 2022-04-24 12:09:03 修改

阅读量7.4k

点赞数 10

分类专栏：功能实现文章标签： vue.js

于 2022-04-08 18:25:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47551643/article/details/124047098

版权

描述：使用vue3 + element plus实现树状表格的拖拽排序功能
请添加图片描述
index.vue

<el-table
  ref="tableRef"
  :data="tableData"
  row-key="id"
  style="width: 100%"
  :tree-props="tableTreeProps"
>
  <el-table-column prop="date" label="Date" width="180" />
  <el-table-column prop="name" label="Name" width="180" />
  <el-table-column
    fixed="right"
    label="操作"
    width="204"
    className="operationCloumn">
    <template v-slot="scope">
      <span @click="deleteClick(scope.row)">编辑</span>
      <span @click="deleteClick(scope.row)">{
  {scope.row.enable ? '停用' :'启用'}}</span>
      <span @click="deleteClick(scope.row)">删除</span>
      <i class="moveIcon iconfont icon-yidong-16px"></i>
    </template>
  </el-table-column>
</el-table>

使用：传入表格tbody的dom元素和对应的表格数据

import {
    useTableDragSort } from '@/hooks/common'
const {
    initDragSort, dragEnd } = useTableDragSort()

onMounted(() => {
   
  const tableBodyDom = document.querySelector('.el-table .el-table__body-wrapper .el-scrollbar__wrap tbody') as HTMLElement
  initDragSort(tableBodyDom, tableData