vue/element表格拖动排序的实现——sortablejs

news/2024/7/10 2:36:21 标签: vue, element, sortablejs

目的
实现页面上的表格,能够拖动排序
在这里插入图片描述


实现

  1. npm install sortablejs --save
  2. 引入sortablejs
import Sortable from 'sortablejs';
  1. 保存sortablejs示例
data() {
	return {
		sortable: {}
	}
},
mounted() {
	this.rowDrop();
}
methods: {
	rowDrop() {
            const tbody = document.querySelector('.el-table__body-wrapper tbody');
            this.sortable = Sortable.create(tbody, {
                onEnd: evt => {//拖动结束时触发,我在这里调用接口,改变后台的排序
                    if (evt.oldIndex !== evt.newIndex) {
                    	......
                    }
                }
            });
        },
}

http://www.niftyadmin.cn/n/1355262.html

相关文章

交换机上如何测试出口带宽速度_网络监控系统组网交换机选择方法!涨姿势!学习好资料!...

最近有朋友在问,一个交换机能带动多少个网络监控摄像头?千兆交换机一般接200万网络摄像机能接几个?24个网络头,用一台24口百兆交换机行不行?这样的问题。下面就这类问题做一些简单的分析!一、根据摄像机的码流和数量来选择1、摄像机码流选择交换机前&…

python回归分析_Python分析51job岗位、多元回归建模预测薪资

项目背景最近在寻找数据分析师的工作,需要了解数据分析师相关岗位的现状,通过招聘网站信息来了解企业的用人要求是最直接也是最简单的途径,这里以Python岗位为例做一个简单的分析报告。明确分析目的分析Python岗位近期的招聘情况,…

js aes加密_威feng网站的aes算法破解

网站是:aHR0cHM6Ly93d3cuZmVuZy5jb20v话说这个网站在过年前使用了aes算法,当然过年后也是aes,但就是把秘钥换了,换成更需要解密一段字符串,然后获得秘钥,最后请求时候再去用这个秘钥加密,并且最…

wiki源码_微服务配置中心 Apollo 源码解析——Admin 发送发布消息

精品专栏《GitHub:中文详细注释的开源项目》摘要: 原创出处 http://www.iocoder.cn/Apollo/admin-server-send-release-message/ 「芋道源码」欢迎转载,保留摘要,谢谢!1. 概述2. ReleaseMessage2.1 ReleaseMessageKeyGenerator2.2…

python 爬虫 包_爬虫开发python工具包介绍 (1)

); 更多产品 关于百度 About Baidu ©2017 Baidu 使用百度前必读

提取对象数组的某个属性值,组成新的字符串或是数组

直接上代码 let extractByKey function(arr,key,resultTypeString,separator,) {let resultArr [];arr.map(item > {if(item[key]) resultArr.push(item[key]);})if(resultTypeArray) return resultArr;else if(resultTypeString)return resultArr.join(separator)else t…

python中sqrt的用法_Python math sqrt()用法及代码示例

sqrt()function是Python编程语言中的内置函数,可返回任何数字的平方根。 用法: math.sqrt(x) 参数: x is any number such that x>0 返回: It returns the square root of the number passed in the parameter. # Python3 prog…

JS的数组遍历方法

JS的数组遍历方法 常用的有find、findIndex、filter、forEach、map、every、some 首先定义一个实验用的数组: let arr[{x:1},{x:2},{x:3}]1. find arr.find(item>item.x3) arr.find(item>item.x4)数组成员依次执行回调函数,直到找出第一个返回值…