Vue+Element树形表格实现拖拽排序示例

目录
  • 安装sortablejs
  • 在需要的页面引入
  • 表格加上row-key="id"
  • 树形表格排序(树结构)
  • 方法介绍
  • 注意点
  • 结语

今天给大家分享一下树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用。

安装sortablejs

npm install sortablejs --save

在需要的页面引入

import Sortable from 'sortablejs'

表格加上row-key="id"

<el-table ref="table" row-key="id" :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
</el-table>

树形表格排序(树结构)

树形表格排序实现原理:把树形的结构转为列表再进行拖拽,不转换的话,拖拽的位置是不对的,就出错了

data() {
  return {
    tableData: [
    	{
    		id: 1,
    		name: 'AAA',
    		level: 1,
    		children: [
    			{
    				id: 2,
		    		name: 'A-1',
		    		level: 2
    			}
    		]
    	},
    	{
    		id: 3,
    		name: 'BBB',
    		level: 1,
    		children: []
    	}
    ],
    activeRows: [] // 转换为列表的数据
  }
},
mounted () {
	this.rowDrop()
},
methods: {
 	// 将树数据转化为平铺数据
	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)
      return arr
    },
	rowDrop() {
      const tbody = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      Sortable.create(tbody , {
      	animation: 300,
      	onMove: () => {
      		this.activeRows = this.treeToTile(this.tableData) // 把树形的结构转为列表再进行拖拽
      	},
      	onEnd: e => {
	       	//e.oldIndex为拖动一行原来的位置,e.newIndex为拖动后新的位置
	       	if (e.oldIndex !== e.newIndex) { // 根据自己项目需求增添条件限制
	       		const oldRow = this.activeRows[e.oldIndex] // 移动的那个元素
	       		const newRow = this.activeRows[e.newIndex] // 新的元素
	       		// 请求接口排序,根据后端要求填写参数

	       	}
	   	 }
      })
   }
}

这里就使用了2个方法,还有其它方法,根据自己需求来使用

方法介绍

onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件
	console.log('onAdd.foo:', [evt.item, evt.from])
},
onUpdate: function (evt) { // 拖拽更新节点位置发生该事件
  	console.log('onUpdate.foo:', [evt.item, evt.from])
},
onRemove: function (evt) { // 删除拖拽节点的时候促发该事件
 	 console.log('onRemove.foo:', [evt.item, evt.from])
},
onStart: function (evt) { // 开始拖拽出发该函数
 	 console.log('onStart.foo:', [evt.item, evt.from])
},
onSort: function (evt) { // 发生排序发生该事件
  	console.log('onUpdate.foo:', [evt.item, evt.from])
},
onEnd ({ newIndex, oldIndex }) { // 结束拖拽
 	 let currRow = _this.tableData.splice(oldIndex, 1)[0]
 	 _this.tableData.splice(newIndex, 0, currRow)
}

注意点

1.如果你的onEnd方法不是箭头函数,如下面这样,需要在上面定义一下this指向,不然会报错

const _this = this
Sortable.create(tbody , {
	onEnd ({ oldIndex, newIndex }) {

	}
})

2.添加拖拽的方法,需要等表格数据获取到,不然有可能是空的tbody ,拖拽就不生效了。 可以在await表格数据获取后,在调用rowDrop方法

3.如果刷新了表格,会导致拖拽失效,需要重新添加拖拽方法this.rowDrop()

4.如果刷新表格会导致页面刷新,滚动条就不在之前操作的位置,需要重新滚动页面,体验效果不好。解决方案就是需要记录滚动条位置,拖拽后刷新页面自动滚动到当前位置,下一篇会讲解记录滚动位置,请进入我的主页查看

结语

到此这篇关于Vue+Element树形表格实现拖拽排序示例的文章就介绍到这了,更多相关Vue Element树形表格拖拽排序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue组件库ElementUI实现表格加载树形数据教程

    ElementUI实现表格树形列表加载教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型 关键代码,在el-table添加属性, :tree-props="{children: 'children'}" ,注意row必须命名为children,官网也进行了说明: 支持树类型的数据的显示.当 row 中包含 children 字

  • 详解vue-cli+element-ui树形表格(多级表格折腾小计)

    前沿 最近在项目开发中需要做一个多级表格,树形表格的功能,看看element-ui上没有,自己开是折腾,话不多说,上思路和代码. 效果图: 可点击收缩,展开. 一,首先创建一个公共的文件夹treeTable,里边放一个index.vue和eval.js 先看看index.vue,原理就是在element-ui的基础上做了进一步改造. //利用element-ui的 <template slot-scope="scope">属性,在插入多级表格 <template>

  • vue+element UI实现树形表格带复选框的示例代码

    一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-10-12 12:06:49 */ "use strict"; import Vue from "vue"; export default function treeToArray( data, expandAll, parent = null, level = null

  • Vue elementUI实现树形结构表格与懒加载

    目录 1.实现效果 2.后端实现 2.1 实体类 2.2 数据库中的数据结构 2.3 后端接口 2.4 swagger测试后端结构功能是否正常 3.前端实现 3.1 页面中引入el-table组件 3.2 实现效果 1.实现效果 2.后端实现 2.1 实体类 @Data @ApiModel(description = "数据字典") @TableName("dict") public class Dict { private static final long se

  • vue Element-ui表格实现树形结构表格

    本文实例为大家分享了Element-ui表格实现树形结构表格的具体代码,供大家参考,具体内容如下 前端效果展示: 在el-table中,支持树类型的数据的显示.当 row 中包含 children 字段时,被视为树形数据.渲染树形数据时,必须要指定 row-key.支持子节点数据异步加载. 通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点.children 与 hasChildren 都可以通过 tree-props 配置. row-key="id"和:tr

  • vue通过element树形控件实现树形表格

    目录 实现效果图 安装依赖 自定义树形控件 其他实现 总结 在vue中通过element树形控件来实现树形表格的效果 通过缩进来实现近似树形表格的效果 实现效果图 安装依赖 $ npm install element-plus --save Element官网 自定义树形控件 分析图中控件分布,每个参数都有固定的width,通过width让数值达到对齐的效果 代码主要通过renderContent函数来自定义树形控件 <template> <div class="mytree&

  • vue+element UI实现树形表格

    本文实例为大家分享了vue+element UI实现树形表格的具体代码,供大家参考,具体内容如下 一.在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-10-12 12:06:49 */ 'use strict' import Vue from 'vue' export default function treeToArray(data, expandA

  • Vue+Element树形表格实现拖拽排序示例

    目录 安装sortablejs 在需要的页面引入 表格加上row-key="id" 树形表格排序(树结构) 方法介绍 注意点 结语 今天给大家分享一下树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装sortablejs npm install sortablejs --save 在需要的页面引入 import Sortable from 'sortablejs' 表格加上

  • vue 使用 sortable 实现 el-table 拖拽排序功能

    本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import Sortable from "sortablejs"; 代码: <template> <div class="table"> <el-table ref="dragTable" :data="tableDat

  • 基于Vue实现平滑过渡的拖拽排序功能

    最近重读Vue官方文档,在 列表的排序过渡 这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下: 例子中实现的效果看起来还是非常不错的,这个效果使我想起来另外一个使用场景,之前我在实现一个列表展示需求的时候,PM想让这个列表具有拖动排序的功能,方便他操作(事实上我最后并没有给他做哈哈),拖动的动画跟这个很像,网上搜索一下,类似插件应该很多,那如果我们自己来实现一个,问题在哪里呢? 首先要拖拽元素,记录元素拖拽

  • vue实现页面div盒子拖拽排序功能

    vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="

  • vue实现移动端touch拖拽排序

    目录 功能介绍: 大致需求: 整体思路: 简单效果展示: 具体实现: 一.display:flex+v-for布局: 二.touch事件绑定: 三.卡片移动: 四.获取手指所在位置: 五.操作数组(删除或插入元素): 六.手指离开屏幕: 七.备注: 八.完整代码: 本文实例为大家分享了vue实现移动端touch拖拽排序的具体代码,供大家参考,具体内容如下 功能介绍: 在移动端开发中,希望实现类似支付宝应用管理页面的可拖拽排序交互. 大致需求: 1.卡片按照一定顺序排序,超出横向范围换行显示:2.

  • react 实现表格列表拖拽排序的示例

    目录 问题描述 思路 解析 1. react-sortable-hoc 2. array-move 问题描述 在项目开发中,遇到这样一个需求:需要对表格里面的数据进行拖拽排序. 效果图如下所示: 思路 安装两个插件: react-sortable-hoc (或者 react-beautiful-dnd) array-move npm install --save react-sortable-hoc npm install --save array-move 解析 1. react-sortab

  • vue移动端写的拖拽功能示例代码

    相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在

  • sortable+element 实现表格行拖拽的方法示例

    背景 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/So

  • jqueryUI里拖拽排序示例分析

    示例参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这个是html代码 复制代码 代码如下: <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog">

  • vue+element的表格实现批量删除功能示例代码

    最近写了一个批量删除功能,遇到了不少坑,特此记录一下 表格的代码如下 复制代码 代码如下: <el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: 'createAt', order: 'descendin

随机推荐