Vue实战（六）：实现树形表格的行拖拽

已于 2023-07-02 11:27:37 修改
阅读量1.7k 收藏 5
点赞数 1
分类专栏： Vue实战 文章标签： vue.js 学习
于 2023-06-13 23:49:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46175652/article/details/131198287
版权

Vue实战（六）：实现树形表格的行拖拽

1、依赖安装

npm install sortablejs --save

2、功能实现

第一，编写树形表格

<template>
    <el-table :data="tableData" border default-expand-all @expand-change="expandChange">
        <el-table-column type="expand">
            <template slot-scope="scope">
                <el-table :data="scope.row.children" v-if="scope.row.children != undefined" border
                    style="margin-top:-12px;margin-bottom:-12px;" class="expandTable">
                    <el-table-column width="45"></el-table-column>
                    <el-table-column prop="date" label="日期" align="center" width="120"></el-table-column>
                    <el-table-column prop="name" label="姓名" align="center" width="120"></el-table-column>
                    <el-table-column prop="address" label="地址" align="center" width="250"></el-table-column>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" align="center" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" align="center" width="250"></el-table-column>
    </el-table>
</template>

第二，在script里面引入Sortable

import Sortable from 'sortablejs'

第三，初始化表格数据

arr: [
	{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1511 弄',children: [
	{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1513 弄'},
	{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1514 弄'}
	]}, 
	{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1512 弄',children: [
	{date: '2016-05-05',name: '王小虎',address: '上海市普陀区金沙江路 1515 弄'},
	{date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}
	]}
]

第四，方法实现

mounted() {
	this.$nextTick(() => {
		this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
		this.dropTable(this.tbodyList);
	})
}

//获取表格数据
getTableData() {
	this.tableData = this.arr;
	this.tempTableData = this.arr;
}

// 表格展开重新渲染
expandChange() {
	this.$nextTick(() => {
		this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
		this.dropTable(this.tbodyList)
	})
}

//行拖拽
dropTable(tbodyList) {
	let _this = this;
	let tbody = tbodyList;
	for (let i = 0; i < tbody.length; i++) {
		Sortable.create(tbody[i], {
			onEnd({ newIndex, oldIndex }) {
				if (newIndex == oldIndex) return;
				_this.tableData[i]['children'].splice(newIndex, 0, _this.tableData[i]['children'].splice(oldIndex, 1)[0]);
				var newArray = _this.tableData[i]['children'].slice(0);
				_this.tableData[i]['children'] = [];
				_this.$nextTick(function () {
					_this.tableData[i]['children'] = newArray;
					_this.dropTableSendRequest(i);
				});
			},
		})
	}
}

// 将数据传到后台
dropTableSendRequest(i) {
	let temparr = this.tempTableData.find((item, index) => {
		if (index == i) {
			return item
		}
	});
	console.log(temparr);
	this.getTableData();
}

3、效果图

在这里插入图片描述

拖拽后：

在这里插入图片描述

4、完整代码

<template>
    <el-table :data="tableData" border default-expand-all @expand-change="expandChange">
        <el-table-column type="expand">
            <template slot-scope="scope">
                <el-table :data="scope.row.children" v-if="scope.row.children != undefined" border
                    style="margin-top:-12px;margin-bottom:-12px;" class="expandTable">
                    <el-table-column width="45"></el-table-column>
                    <el-table-column prop="date" label="日期" align="center" width="120"></el-table-column>
                    <el-table-column prop="name" label="姓名" align="center" width="120"></el-table-column>
                    <el-table-column prop="address" label="地址" align="center" width="250"></el-table-column>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" align="center" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" align="center" width="250"></el-table-column>
    </el-table>
</template>
<script>
import Sortable from 'sortablejs';
export default {
    name: "demo02",
    data() {
        return {
            arr: [{
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1511 弄',
                children: [
                    {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1513 弄'
                    },
                    {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1514 弄'
                    }
                ]
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1512 弄',
                children: [
                    {
                        date: '2016-05-05',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1515 弄'
                    },
                    {
                        date: '2016-05-06',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }
                ]
            }],
            tableData: [],
            tempTableData: [],
            tbodyList: null
        }
    },
    created() {
        this.getTableData();
    },
    mounted() {
        this.$nextTick(() => {
            this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
            this.dropTable(this.tbodyList);
        })
    },
    methods: {
        //获取表格数据
        getTableData() {
            this.tableData = this.arr;
            this.tempTableData = this.arr;
        },
        // 表格展开重新渲染
        expandChange() {
            this.$nextTick(() => {
                this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
                this.dropTable(this.tbodyList)
            })
        },

        //行拖拽
        dropTable(tbodyList) {
            let _this = this;
            let tbody = tbodyList;
            for (let i = 0; i < tbody.length; i++) {
                Sortable.create(tbody[i], {
                    onEnd({ newIndex, oldIndex }) {
                        if (newIndex == oldIndex) return;
                        _this.tableData[i]['children'].splice(newIndex, 0, _this.tableData[i]['children'].splice(oldIndex, 1)[0]);
                        var newArray = _this.tableData[i]['children'].slice(0);
                        _this.tableData[i]['children'] = [];
                        _this.$nextTick(function () {
                            _this.tableData[i]['children'] = newArray;
                            _this.dropTableSendRequest(i);
                        });
                    },
                })
            }
        },

        // 将数据传到后台
        dropTableSendRequest(i) {
            let temparr = this.tempTableData.find((item, index) => {
                if (index == i) {
                    return item
                }
            })
            console.log(temparr);
            this.getTableData();
        }
    }
}
</script>
阿标的博客
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于Vue实现可以拖拽的树形表格实例详解
10-17
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程,需要的朋友可以参考下
基于Vue实现可以拖拽的树形表格
08-10
基于Vue实现可以拖拽的树形表格
vue项目 使用SortableJs拖拽树形排序，树形添加、删除、编辑
qq_30682951的博客
03-31 1789
使用sortable.js拖拽树形结构数据，树形数据可以编辑、删除、添加
VUE tree树双击选中(显示层级结构) 及 vuedraggable插件拖拽功能的实现_el-tree树节点双击
最新发布
2401_84616444的博客
05-08 913
onMove(e) { //拖拽事件 https://blog.csdn.net/Kiruthika/article/details/123903706 可查看相关配置。//单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件。//计时器,计算300毫秒为单位,可自行修改。label: “二级 3-2”}]}],toChange(e) {//拖拽事件。label: “二级 2-1”},label: “二级 2-2”}]label: “数据源2”,label: “数据源3”,label: “视图”,
el-table树形列表拖拽排序(sortablejs)
TZ1284063988的博客
12-06 4688
sortablejs
令人头秃的树形表格自由拖拽实现（vue+ant+Sortable）
weixin_43951323的博客
10-26 2444
最近项目提出目标，须实现树状表格自由拖拽，并可支持antdesign（elementui）一类ui框架表格部分功能，紧张的项目周期让人心情久久难以平复，这是连百度的回答都难以让我释怀的痛。没法自己撸呗，代码核心难点在于拖拽后需同步数据结构及同步表格视图。献祭无数根头发后，终成目标。实现效果如下（额外功能可根据antdesign配置属性自行添加）: 代码如下 ： <template> <div> <a-table v-if="tableShow"
vue element-table（树形结构），实现同级拖动排序
weixin_45691700的博客
03-15 3377
5.犹豫这个过程中需要子级存在父级的parentId，自己把扁平化的方法改造了一下，在查询完列表数据时同步给子级添加父级的id。1.vue引用sortablejs 参考相关配置http://www.sortablejs.com/options.html。####需求：树形结构的table需要实现同级拖拽排序。3.初始化created中调用方法，方法如下。
表格拖拽、树状拖拽的各种方法
Qxn530的博客
12-01 3830
配置项：Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。第一步：安装第二步：使用方法完整代码。
elTable实现树形结构拖拽功能
jianjian_19的博客
09-19 2947
当别人问你vue的编译过程是怎么样的时候，你怎样回答？ 我们先说什么是编译，为什么要编译，首先因为vue写的html模板，是浏览器识别不了的，我们通过编译的过程，可以进行依赖收集，进行依赖收集之后我们就把Data中的数据模型和视图之间产生依赖关系，当模型发生变化的时候，我们就可以通知这些依赖的地方让他们进行更新，这就是我们执行编译的目的，我们把这些界面全部编译以后，更新操作，我们就可以做到模型驱动视图的变化这就是编译的过程。 ...
踩坑日记 - Sortable 拖动树表格排序
张兴华的博客
09-15 2426
以 Element 树表格为例，实现了树表格的同级之间排序（跨级也有代码，但还有问题） 踩坑点： onMove回调中 oldIndex 会随时变化，若想拿到最开始拖动的Row，需要使用onChoose 。 在onChoose需将 oldIndex 或者 oldRow 存储一下，供后续onMove和onEnd使用。 onMove 中可以使用return false 阻止拖动 因为是树形结构，所以回调中返回的 Index 并不准确，所以要预先在onChoose 时将树数据扁平化，才能根据返回的Index获.
element UI table表格树形结构，子级不刷新。
weixin_47641768的博客
01-22 3155
项目场景： element UI table表格树形控件，子级菜单不刷新数据 项目场景：修改表格中的数据保存后，当前数据会有历史版本，会展示在当前数据的子级里。但是每次保存后重新请求列表刷新，子级菜单里会出现下拉列表，配置的时候hasChildren是不存在的，但是因为保存的时候只是刷新了数据，但是没更新table表格的插件（树形控件），所以导致子级菜单的第一条会有下拉列表，点击下拉列表还会报错。 问题描述： table表格插件不刷新 例如： <el-table :data='tableDat
vue+element UI实现树形表格带复选框的示例代码
10-17
在Vue和Element UI框架中，实现树形表格带复选框功能可以极大地增强用户界面的交互性和数据管理能力。以下是一些关键知识点和步骤，详细解释如何构建这样的组件： 1. **数据转换**： 树形表格的数据通常不是直接以...
vue+树形表格拖放.zip
04-20
在本项目中，“vue+树形表格拖放.zip”提供了基于Vue.js的解决方案，用于实现树形表格元素的拖放功能。Vue.js是一个流行的前端JavaScript框架，它以其易学、可扩展性和高效的虚拟DOM更新机制而闻名。Vue-router是Vue...
Vue3 elementPlus el-table 拖拽排序
m0_62959350的博客
09-25 850
【代码】elementPlus Table 拖拽排序。
vue树形表格结构——拖拽
zyzyzyzyyy的博客
06-28 2437
el-table树形结构 拖拽（支持自定义插槽）
vue树形表格拖拽排序限制父级拖进子级，限制跨级拖拽，只能同级拖拽排序（原创）
牛儿还在山坡上吃草的博客
08-16 3806
Vue显示表格部分 <template> <div> <!--列表--> <vxe-grid border row-key ref="xTable2" class="sortable-tree-demo" :scroll-y="{ enabled: false }" :columns="tableColumn" :data="tableTreeData" :tree-config="{ children: 'children' }"...
用vue和sortableJS轻松实现表格拖拽排序
Shids_的博客
08-25 3462
用vue和sortableJS轻松实现表格拖拽排序
vue3 + element plus 实现树形表格拖拽排序
幽冥雪羽的博客
07-31 1996
vue3 + element plus 实现树形表格拖拽排序。
el-table拖拽功能实现（3种详细解释）
qq_71214810的博客
12-22 5339
1.el-table自带的列宽拖拽 2.实现左右table宽度拖拽 3.利用第3方插件自由拖拽
vue+element ui实现树形表格
09-06
Vue Element UI可以通过使用Element UI的Table组件和El-Tree组件来实现树形表格。 首先，我们需要在Vue项目中引入Element UI库。可以通过npm安装Element UI，并在main.js中引入所需的组件。 接下来，在Vue组件中使用Table组件来实现表格的基本结构。设置表格的列数据，并定义表格的数据源。 然后，在Table组件中使用scoped slot来自定义每个单元格的内容。在需要显示树形结构的列中，我们可以使用El-Tree组件来渲染树形图标和文字。 在实现树形结构时，可以使用Element UI提供的treeData结构来描述数据的层级关系。通过设置每个节点的label和children属性，可以实现树形结构的展示。 另外，Element UI还提供了一些treeProps属性来自定义树形结构的样式。例如，可以通过设置indent属性来控制每一层级的缩进距离，即树形结构的层级感。 最后，可以在表格中使用一些Element UI提供的方法和事件来实现树形表格的交互功能。例如，可以通过调用this.$refs.table.toggleRowExpansion(rowData)来展开或收起某一行的子节点。 总结，通过使用Element UI的Table组件和El-Tree组件，我们可以很方便地实现树形表格。只需要设置表格的列数据和数据源，以及自定义每个单元格的内容，就可以展示出树形结构的表格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值