如何通过El-Table 和Sortable实现拖拽1

最新推荐文章于 2024-07-10 17:13:24 发布
最新推荐文章于 2024-07-10 17:13:24 发布
阅读量434 收藏 8
点赞数 9
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68577539/article/details/136142532
版权
文章描述了一个使用Vue.js和Sortable.js实现的可拖动的树形表格组件，用户可以添加、移动二级节点，并处理不同层级间的拖拽事件，保持树形结构的更新。
摘要由CSDN通过智能技术生成 
<template>
    <div class="draggable" style="padding: 20px">
        <el-table ref="sortableTable" row-key="id" :data="treeData" :key="tableKey" style="width: 100%">
            <el-table-column prop="展开" width="40"></el-table-column>
            <el-table-column prop="添加二级" width="60">
                <template slot-scope="scope">
                    <span style="cursor: pointer; color: #100db1" @click="addItem(scope['row'])"
                        v-if="scope['row']['level'] === 1">{{ '+ 二级' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="拖拽" width="40">
                <template slot-scope="scope">
                    <i class="el-icon-setting draggableIcon"></i>
                </template>
            </el-table-column>
            <el-table-column prop="name"> </el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                    <div class="hoverStyle">
                        <img src="../../assets/imgs/公共日期@2x.png" alt="">
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import Sortable from 'sortablejs';

export default {
    mounted() {
        this.rowDrop();

    },
    data() {
        return {
            tableKey: 0,
            mouseOver: {},
            activeRows: [],
            treeData: [
                {
                    id: 1,
                    level: 1,
                    name: '李一',
                    gender: '男',
                    age: 30,
                    job: '会计',
                    isOriginalFather: true,
                    children: [
                        {
                            id: 31,
                            level: 2,
                            name: '李一1',
                            gender: '2016-05-01',
                            age: '王小虎',
                            job: '上海市普陀区金沙江路 1519 弄'
                        },
                        {
                            id: 32,
                            name: '李一2',
                            level: 2,
                            gender: '2016-05-01',
                            age: '王小虎',
                            job: '上海市普陀区金沙江路 1519 弄'
                        }
                    ]
                },
                {
                    level: 1,
                    id: 2,
                    name: '王二',
                    gender: '未知',
                    age: 18,
                    job: '无业游民',
                    isOriginalFather: true,
                    children: []
                },
                {
                    id: 3,
                    name: '张三',
                    gender: '男',
                    age: 50,
                    job: '老板',
                    level: 1,
                    isOriginalFather: true,
                    children: [
                        {
                            id: 321,
                            level: 2,
                            name: '张三1',
                            gender: '2016-05-01',
                            age: '王小虎',
                            job: '上海市普陀区金沙江路 1519 弄'
                        },
                        {
                            id: 322,
                            level: 2,
                            name: '张三2',
                            gender: '2016-05-01',
                            age: '王小虎',
                            job: '上海市普陀区金沙江路 1519 弄',
                            children: [
                                {
                                    id: 3221,
                                    level: 3,
                                    name: '张三2222-1',
                                    gender: '2016-05-01',
                                    age: '王小虎',
                                    job: '上海市普陀区金沙江路 1519 弄'
                                },
                                {
                                    id: 3222,
                                    level: 3,
                                    name: '张三2222-2',
                                    gender: '2016-05-01',
                                    age: '王小虎',
                                    job: '上海市普陀区金沙江路 1519 弄',
                                    children: [
                                        {
                                            id: 3222222,
                                            level: 4,
                                            name: '张三2222-2--22-2-2-2',
                                            gender: '2016-05-01',
                                            age: '王小虎',
                                            job: '上海市普陀区金沙江路 1519 弄'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ],
            tableConfig: {
                tableItems: [
                    {
                        label: '姓名',
                        prop: 'name'
                    },
                    {
                        label: '性别',
                        prop: 'gender'
                    },
                    {
                        label: '年龄',
                        prop: 'age'
                    },
                    {
                        label: '工作',
                        prop: 'job'
                    }
                ]
            }
        };
    },
    methods: {
        setMouseOver(index, isHovered) {
            this.$set(this.mouseOver, index, isHovered);
        },
        getUuiD(randomLength) {
            return Number(Math.random().toString().substr(2, randomLength) + Date.now()).toString(36);
        },
        // 添加二级
        addItem(r) {
            let data = {
                id: this.getUuiD(),
                name: '李一11111111',
                gender: '2016-05-01',
                age: '王小虎',
                job: '上海市普陀区金沙江路 1519 弄'
            };
            let idx = this.treeData.findIndex(e => e.id === r.id);
            if (idx > -1) {
                let item = this.treeData[idx];
                if (item.hasOwnProperty('children')) {
                    item.children.push(data);
                } else {
                    item['children'] = [{ ...data }];
                }
            }
            this.treeData = [...this.treeData];
        },
        // 行拖拽
        rowDrop() {
            // 获取表格节点
            // this.tableSortDestroy()
            this.$nextTick(() => {
                const el = this.$refs.sortableTable.$el.querySelector('.el-table__body-wrapper tbody');
                if (!el) {
                    return;
                }
                const _this = this;
                // 插件调用函数
                Sortable.create(el, {
                    animation: 300,
                    handle: '.draggableIcon',
                    onMove({ dragged, related }) {
                        _this.$set(_this, 'activeRows', _this.treeToTile(_this.treeData)); // 把树形的结构转为列表再进行拖拽
                    },
                    onEnd({ oldIndex, newIndex }) {
                        const oldRow = _this.activeRows[oldIndex]; // 移动的那个元素
                        const newRow = _this.activeRows[newIndex]; // 新的元素
                        console.log(oldRow, newRow, 'newRow');

                        if (oldIndex !== newIndex && oldRow.id !== newRow.id) {
                            const modelProperty = _this.activeRows[oldIndex];
                            const changeIndex = newIndex - oldIndex;
                            const index = _this.activeRows.indexOf(modelProperty);
                            if (oldRow.level === newRow.level && oldRow.level === 1) {
                                // 一级之间的拖拽
                                if (index < 0) {
                                    console.log('index < 0');
                                    return;
                                }
                                console.log('111111111');
                                _this.activeRows.splice(index, 1);
                                _this.activeRows.splice(index + changeIndex, 0, modelProperty);
                                _this.sortMenuData('1-1');
                            } else if (oldRow.level === newRow.level && oldRow.level === 2) {
                                // 二级之间的拖拽
                                // _this.activeRows.splice(index, 1)
                                console.log('22222222');
                                let res = [];
                                _this.treeData.forEach(t => {
                                    if (t.hasOwnProperty('children')) {
                                        // 在原来的一级下删除二级
                                        let oldChildIndex = t.children.findIndex(c => c.id === oldRow.id);
                                        if (oldChildIndex > -1) {
                                            t.children.splice(oldChildIndex, 1);
                                        }
                                        // 在新的一级下添加二级
                                        let newChildIndex = t.children.findIndex(c => c.id === newRow.id);
                                        console.log(newChildIndex, 'newChildIndex');
                                        if (newChildIndex > -1) {
                                            t.children = [...t.children.slice(0, newChildIndex), oldRow, ...t.children.slice(newChildIndex)];
                                        }
                                        console.log(t.children, 't.children');
                                    }
                                    res.push(t);
                                    _this.treeData = res;
                                });
                                _this.tableKey = Math.random();
                                _this.rowDrop();
                            } else if (oldRow.level === 2 && newRow.level === 1) {
                                console.log('33333333333');
                                // 二级移动到一级
                                // console.log('2-1', oldRow, newRow)
                                if (newRow.isOriginalFather && (!newRow.children || (newRow.children && newRow.children.length < 1))) {
                                    let res = [];
                                    _this.treeData.forEach(t => {
                                        if (t.children && t.children.length > 0) {
                                            // 在原来的一级下删除二级
                                            let oldChildIndex = t.children.findIndex(c => c.id === oldRow.id);
                                            if (oldChildIndex > -1) {
                                                t.children.splice(oldChildIndex, 1);
                                            }
                                        } else {
                                            if (t.id == newRow.id) {
                                                t.children.push(oldRow);
                                            }
                                        }
                                        res.push(t);
                                        _this.treeData = res;
                                        console.log(_this, 'res最终');
                                        // 将提升为一级的二级放到相应位置
                                    });
                                    _this.tableKey = Math.random();
                                    _this.rowDrop();
                                } else {
                                    let res = [];
                                    _this.treeData.forEach(t => {
                                        if (t.hasOwnProperty('children')) {
                                            // 在原来的一级下删除二级
                                            let oldChildIndex = t.children.findIndex(c => c.id === oldRow.id);
                                            if (oldChildIndex > -1) {
                                                t.children.splice(oldChildIndex, 1);
                                            }
                                        }
                                        // 将提升为一级的二级放到相应位置
                                        let item = { ...oldRow, level: 1 };
                                        if (t.id === newRow.id) {
                                            res.push(t, item);
                                        } else {
                                            res.push(t);
                                        }
                                        _this.treeData = res;
                                    });
                                    _this.tableKey = Math.random();
                                    _this.rowDrop();
                                }
                            } else if (oldRow.level === 1 && newRow.level === 2) {
                                console.log('4444444444444');
                                // 一级移动到二级sww
                                console.log('1-2', oldRow, newRow);
                                var flag = oldRow?.children?.some(item => {
                                    return item.id == newRow.id;
                                });
                                // console.log(flag,'flag');
                                if (!flag) {
                                    let res = [];
                                    let item = [{ ...oldRow, level: 2 }];
                                    item[0]?.children?.forEach(c => {
                                        c.level = 3;
                                    });
                                    console.log(item, 'item0000');
                                    if (oldRow.hasOwnProperty('children')) {
                                        //
                                    }
                                    _this.treeData.forEach(t => {
                                        // 将降为二级的目标以及他的children放到相应的位置
                                        if (t.hasOwnProperty('children')) {
                                            let newChildIndex = t.children.findIndex(c => c.id === newRow.id);
                                            if (newChildIndex > -1) {
                                                t.children = [...t.children.slice(0, newChildIndex), ...item, ...t.children.slice(newChildIndex)];
                                            }
                                        }
                                        if (t.id !== oldRow.id) {
                                            res.push(t);
                                        }
                                    });
                                    console.log(res, 'RES');
                                    _this.treeData = res;
                                    _this.tableKey = Math.random();
                                    _this.rowDrop();
                                } else {
                                    _this.treeData = _this.treeData;
                                    _this.tableKey = Math.random();
                                    _this.rowDrop();
                                }
                            } else if (newRow.level === 3) {
                                _this.treeData = _this.treeData;
                                _this.tableKey = Math.random();
                                _this.rowDrop();
                            }
                        }
                    }
                });
            });
        },
        sortMenuData(type) {
            if (type === '1-1') {
                let res = [];
                this.activeRows.forEach(r => {
                    if (r.level === 1) {
                        let itemIdx = this.treeData.findIndex(t => t.id === r.id);
                        if (itemIdx > -1) {
                            res.push({ ...this.treeData[itemIdx] });
                        }
                    }
                });
                this.treeData = res;
            }
            this.tableKey = Math.random(); //狠狠的刷新dom
            this.rowDrop(); // 再把拖拽的功能塞入
        },

        treeToTile(treeData, childKey = 'children') {
            // 将树数据转化为平铺数据
            const arr = [];
            const expanded = data => {
                if (data && data.length > 0) {
                    data.filter(d => d).forEach(e => {
                        arr.push(e);
                        expanded(e[childKey] || []);
                    });
                }
            };
            expanded(treeData);
            // console.log('treeToTile', arr)
            return arr;
        }
    },
    mounted() {
        this.$nextTick(() => {
            const items = document.getElementsByClassName('hoverStyle')
            console.log(items,'items');
            const temp = Array.from(items)
            temp.forEach(item => {
                item.addEventListener("mouseover", () => {
                    item.classList.add("easeOutAnimate")
                    setTimeout(() => {
                        item.classList.remove("easeOutAnimate")
                    }, 1000)
                })
            });
        });
    },
};
</script>
<style  >
.hoverStyle img{
    opacity: 0;
}
.hoverStyle:hover img {
    opacity: 1 !important;

}

.easeOutAnimate img {
    animation: easeOutAnimate 1s linear;

}

@keyframes easeOutAnimate {
    0% {
        opacity: 1;

    }

    50% {
        opacity: 1;

    }

    100% {

        opacity: 0;
    }

}
</style>

Five418
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue用sortablejs实现el-table表格行拖拽排序，在el-dialog中使用遇到的问题
coderYYY的博客
06-09 189
使用sortable.js实现el-table行拖拽
基于Vue实现可以拖拽的树形表格
08-10
基于Vue实现可以拖拽的树形表格
elTable实现树形结构拖拽功能
jianjian_19的博客
09-19 3030
当别人问你vue的编译过程是怎么样的时候，你怎样回答？ 我们先说什么是编译，为什么要编译，首先因为vue写的html模板，是浏览器识别不了的，我们通过编译的过程，可以进行依赖收集，进行依赖收集之后我们就把Data中的数据模型和视图之间产生依赖关系，当模型发生变化的时候，我们就可以通知这些依赖的地方让他们进行更新，这就是我们执行编译的目的，我们把这些界面全部编译以后，更新操作，我们就可以做到模型驱动视图的变化这就是编译的过程。 ...
vue+element实现树形上下拖拽，快速提升你的前端技能
Shids_的博客
08-23 4954
vue+element实现树形上下拖拽，快速提升你的前端技能
element 树结构列表拖拽功能
u013486889的博客
12-10 544
html <script src="//unpkg.com/sortablejs@1.7.0/Sortable.js"></script> <script src="//unpkg.com/vue/dist/vue.js"></script> <link rel="stylesheet" href="//unpkg.com/elem...
sortable+element 实现表格行拖拽的方法示例
12-01
背景 1、vue项目中的表格需要实现行拖拽功能 2、表格使用element组件库中el-table 方案介绍 Sortable.js 介绍：Sortable.js是一款轻量级的拖放排序列表的js插件 引用自官方文档：No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap. 参考地址： https://github.com/SortableJS/Sortable vuedraggable 介绍：基于Sortable.js
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：...table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
jQuery-ui插件sortable实现自由拖动排序
01-19
本文为大家分享了jQuery ui插件sortable实现自由拖动排序的具体方法，供大家参考，具体内容如下 此为网上资源demo自己做了修改，记录下方便日后的学习。 效果展示： 代码展示： <!doctype html> <...
vue +el + Sortable table列拖拽排序
05-19
vue table 列拖拽排序例子
vue Element ui实现table列拖动效果
11-07
Vue.js 是一款非常流行的前端框架，它以其轻量级、高效和易用性著称。Element UI 是基于 Vue 的一套组件...通过以上的实现方式，你可以在 Vue 和 Element UI 项目中轻松地创建一个支持列拖动的表格，提升用户交互体验。
Element-UI Table组件上添加列拖拽效果实现方法
12-13
Element-UI 的 Table 组件很强大，但是我们的需求更强大&hellip; 简单粗暴的来一发效果图： 一、数据驱动 传统的拖动效果，都是基于通过 mousedown、mousemove、mouseup 事件来修改删减 dom 节点 但 Vue 是一个数据驱动的前端框架，开发时应尽量避免操作 dom 而且 Element-UI 的 Table 组件封装得很严谨，直接操作 dom 很容易产生不可预计的 bug 所以我的核心思路就是：通过一个数组渲染表头（列），然后修改这个数组的顺序，从而修改列表的列排序 template 部分： <div class="w-table" :class="{'w
vue element-table（树形结构），实现同级拖动排序
weixin_45691700的博客
03-15 3506
5.犹豫这个过程中需要子级存在父级的parentId，自己把扁平化的方法改造了一下，在查询完列表数据时同步给子级添加父级的id。1.vue引用sortablejs 参考相关配置http://www.sortablejs.com/options.html。####需求：树形结构的table需要实现同级拖拽排序。3.初始化created中调用方法，方法如下。
Vue3 - Element Plus 实现表格组件 el-table 拖曳拖动排序功能，支持复杂二级嵌套表格下级子项联动父级拖拽交换顺序位置，Table表格鼠标按住移动行列上移下移排序（详细示例代码
最新发布
王佳斌
07-10 2791
vue3，nuxt3，element plus，表格，Table表格组件，el-table，拖曳排序，鼠标拖动排序，拖拽排序，改变表格行位置，鼠标拖动表格行row来交换位置，复杂表格，有下级的表格怎么拖曳排序，有二级下级的表格怎么拖曳排序，表格内的数据项拖拽排序，实现拖拽排序，详细教程，sortablejs，表格行拖拽，table表格 行列动态拖拽，数据无法更新怎么办，表格太复杂怎么排序，排序后拿不到行数据id，排序后怎么对接后端服务器，能展开二级的行，排序后如何对接接口，拖拽移动，Vue3 element
sortablejs插件在el-table中的运用
qq_50661854的博客
05-11 4556
sortablejs插件在el-table中的运用 概述需求 有一个Table表格，由于数据是根据自增的ID进行排序显示的，有时了调整顺序会在数据库中直接操作数据表，来达到调整数据顺序的目的，因为为了实现在页面实现较为简单的拖拽排序，因此展开讨论。 最后sortablejs插件可以满足需求并可以快捷的实现功能。 参看资料： 官网：http://www.sortablejs.com/ 中文文档：https://www.itxst.com/sortablejs/neuinffi.html 1、安装sorta
Element-ui el-table 使用 SortableJS 实现表格拖拽排序，并将排序结果更新到数据库使数据行顺序修改
热门推荐
XH_jing的博客
09-13 1万+
前言 当我们使用 Element el-table 组件时，需要用到拖拽排序的需求时，虽然 el-table 自带支持按列排序，但是当我们自己拖拽进行排序时，现有组件是无法满足的。 这个时候我们就需要引入一个强大的js拖拽库：SortableJS 该拖拽库简单易上手，官网提供了我们常用的拖拽效果的demo，下面我主要记录一下如何在我们的项目中快速上手使用。 一、安装 安装方式分为三种： 1、npm 安装 npm install sortablejs --save 2、bower 安装 bower inst
传入el-table的数据结构
ZQH084811的博客
09-19 815
表格展示 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="n
四种el-table的配置排序方式
ahwangzc的博客
10-17 4583
四：ref="table" ，this.$refs.table.sort('salesVolume','descending');二：:default-sort="{prop: 'salesVolume', order: 'descending'}"上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。参数prop属性指定排序列，order指定排序顺序。三：:sort-orders="['descending','ascending']"
el-table+sortablejs拖拽排序
weixin_59685936的博客
10-09 256
el-table+sortablejs拖拽排序
Sortable实现el-table拖拽
07-13
要实现 el-table 的拖拽排序，可以使用 Sortable.js 库。下面是一个示例代码，演示如何使用 Sortable.js 实现 el-table 的拖拽排序： 首先，在项目中安装 Sortable.js 库： ```bash npm install sortablejs ``` 然后，在你的 Vue 组件中，引入 Sortable.js 和 el-table 组件： ```javascript import Sortable from 'sortablejs'; import { ElTable } from 'element-ui'; ``` 接下来，在 el-table 的外部容器上添加一个唯一的 id，并在 mounted 钩子中初始化 Sortable： ```html <template> <div id="sortable-container"> <el-table :data="tableData" ref="sortableTable"> <!-- 表格列定义 --> </el-table> </div> </template> <script> export default { data() { return { tableData: [ // 表格数据 ] }; }, mounted() { const container = document.getElementById('sortable-container'); const table = this.$refs.sortableTable.$el.querySelector('.el-table__body-wrapper tbody'); Sortable.create(table, { animation: 150, onEnd: ({ oldIndex, newIndex }) => { const movedItem = this.tableData.splice(oldIndex, 1)[0]; this.tableData.splice(newIndex, 0, movedItem); } }); } }; </script> ``` 在上述代码中，我们给 el-table 的外部容器添加了一个 id（这里为 "sortable-container"），然后在 mounted 钩子中，通过 Sortable.create() 方法初始化了拖拽功能。在 onEnd
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值