木灵鱼儿
阅读:2832
element table表格使用sortablejs插件进行拖拽
在表格里面进行拖拽,肯定没法用组件的形式,因为会破坏table的结构,所以只能从 dom上入手。
安装插件
yarn add sortablejs --dev
中文说明站点:sortablejs中文网
使用
<template>
<el-table :data="tbody" id="appTable" row-key="id">
...
</el-table>
</template>
<script>
import Sortable from "sortablejs/modular/sortable.core.esm.js";
export default {
data(){
return {
tbody:[]; //表格数据
}
},
methods: {
//初始化拖拽表格
initSortable() {
this.$nextTick(() => {
const appTable = document.querySelector(
"#appTable .el-table__body>tbody"
);
this.$appTable = Sortable.create(appTable, {
animation: 150,
ghostClass: "sortable-ghost",
onEnd: (event) => {
const oldItem = this.tbody[event.oldIndex];
this.tbody.splice(event.oldIndex, 1);
this.tbody.splice(event.newIndex, 0, oldItem);
//保存拖拽排序api
//自己写业务请求,idArr得到了拖拽后的数组id顺序
//const idArr = this.tbody.map((item) => item.id);
},
});
//阻止火狐拖拽新建新页面
document.body.addEventListener("drop", this.preventDrop, false);
});
},
//阻止默认drop事件
preventDrop(event) {
event.preventDefault();
event.stopPropagation();
},
//销毁拖拽表格
destroySortable() {
if (this.$appTable) this.$appTable.destroy();
document.body.removeEventListener("drop", this.preventDrop, false);
},
},
created() {
//初始化拖拽表格
this.initSortable();
},
beforeDestroy() {
//销毁拖拽表格
this.destroySortable();
},
}
</script>
拖拽后的数据获取也很简单,分三步:
onEnd事件表示拖拽结束后,他有一个对象,该对象有两个属性我们可以用到,一个是oldIndex,表示被拖拽的元素之前的index下标,newIndex则是被拖拽的元素新的index下标。
那么开始干:
- 从tbody源数据中先拿到一份被拖拽的数据对象,命名为oldItem
- 从tbody源数据中删除被拖拽的数据对象
- tbody源数据从newIndex位置插入一份oldItem
完事,这样我们的源数据始终和拖拽的可视化数据保持一致,所以我们可以直接遍历源数据得到一份最新的基于当前拖拽顺序的id数组,当然也可以是其他,看tbody里面有啥。
注意:
- 一定要设置
row-key="id"
,否则拖拽后会莫名其妙 - 火狐浏览器拖拽默认会新建新页面,解决这个问题就是阻止body的默认拖拽行为。
以上就是使用方式了。顺带一提querySelector
的兼容性还是ok的,放心使用。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

关于element侧边栏导航一些新想法
高亮问题由于侧边栏可能不会把所有的路由name都丢上去展示,常常是展示一个父级菜单名,子路由菜单作为页面内的导航啥的。常见的场景: 详情页为此,我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。常见的做法就是在路由的meta里面添加一个activeRoute配置,里面标明需要高亮的侧边栏name那么这个activeRoute怎么配置呢?我个人觉得应该遵循父级优先的概念,如果子路由设置了,但是父级路由也设置了,那么以父级为准,也就是最上层路由为准,这样子集直接可以随便切换,不会影响侧边栏高亮,因为他有父级。那么如果没有父级,就使用自己遵循这个原则,我们对el-menu的defau...
关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题
问题当通过Tooltip组件,click事件触发抽屉或者弹窗功能时,Tooltip的hover效果,会在抽屉和弹窗功能关闭后又再次触发显示。bug图解决思路我估计是因为遮罩层的问题,导致元素的事件监听不到鼠标离开,导致关闭弹窗后,浏览器又自动选中了。所以我的解决办法很简单,找到那个触发hover效果的dom元素,对他进行离开事件触发即可。<el-tooltip effect="dark" content="通知" placement="bottom"> <a href="javascr...

element input异步校验+自定义错误提示
主要的效果就是用户注册时,输入的账号如果已经注册了,要提示已经注册,然后提供一个按钮,直接前往登陆。效果图教程首先我们要知道怎么进行自定义错误提示<template> <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input v-model="form.account" name="a...

element input表单验证数字类型方法大全
是不是常常头疼数字类型的校验,整数,小数,往往无法通过一个rules的type属性搞定,自定义校验又五花八门,是否有一套标准流程呢?整数校验整数校验简单,input使用.number修饰符,rules配置type属性即可。<template> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="短信条数:" pr...
关于element el-checkbox组件click事件的一些想法
el-checkbox本身是没有click事件的,但是我们可以通过native的方式穿透下去,但是这样的话会有一个问题,我们先看下代码:<el-checkbox v-model="checked" @click.native="onClick">备选项</el-checkbox>如果你在onClick函数中进行输出,你会发现,click实际上运行了两次,native本身是将事件绑定给了组件的根元素,这就导致他会被子元素的click事件冒泡触发。哪怕你加了stop也没有效果,因为stop只能防止根元素往上冒泡,并不能阻止他本身...
vue 通过js触发element ui的图片预览组件
element ui的图片预览组件并没有单独提供出来,默认是在image组件里面一起使用,但是有的时候,我们需要点击某一个自定义按钮,然后弹出图片预览,但是,又不需要使用el-image组件,于是乎,有了这篇笔记。首先思路并不是我的,我也是看了下同事,他网上找的教程,然后我看了下,在掘金找到一篇文章:《Vue中使用element-ui的内置组件实现图片预览全局调用功能》;深受启发,于是也记下自己的笔记。首先思路是两个:element ui的图片预览本身是一个vue组件vue.extend构造器将vue组件通过js的方式构造出来,new出来的这个构造器,他的属性为组件的属性以及其他(其他就...
