element table 可拖拽,elementui table 拖拽
主要介绍拖拽插件sortable.js实现el-table表格的拖拽效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
问题描述案例1简单拖拽代码附案例2 el-table表单拖拽效果图代码附。
问题描述
Sortable.js是一个优秀的js拖放库。因为是原生js写的，所以性能不错，也支持移动终端。这里有两个案例可以学习。
案例一 简单拖拽
翻译
代码附上
看关于理解的笔记。如果运行它，请复制并粘贴它。
！声明文档类型
超文本标记语言
头
meta charset=utf-8 /
Titlesortable.js拖动示例/title
meta name=viewport
content= width=设备宽度，initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0，user-scalable=no，minimal-ui
！-介绍插件-
script src= https://www . itxst . com/package/sortable/sortable . min . js /script
风格
#wrapBox {
宽度：360px
/*拖动容器的高度，该高度根据拖动项的高度扩展*/
高度：自动；
}
#wrapBox div {
填充：8px
背景色：# fdfdfd
边框：纯色1px # eee
边距-底部：10px
/*将鼠标悬停样式添加到移动样式中，否则不好看*/
光标：移动；
字体大小：13px
}
/*设置鼠标按下时的样式，加点好看的*/
#wrapBox div:活动{
背景色：# eee
}
/风格
/头
身体
H2优先扣减顺序：/h2
！-一般来说，拖动的结构是：外面一个拖动容器，里面一个接一个拖动项目-
div id=wrapBox
Div-ID= 1 ICBC ICBC /div
Div-ID= 2中国建设银行中国建设银行/div
Div-ID= 3中行中行/div
Div-ID= 4农行农行/div
Div-ID= 5交通银行交通银行/div
/div
脚本
//第一步，获取拖动容器
var wrap=document . getelementbyid( wrap box )；
//第二步，设置拖动项的拖动规则。
var规则={
Animation: 500，//拖动时元素位置变化的动画时长，
//拖动完成后的回调函数
onEnd:函数(事件){
Console.log(参数是拖动事件对象，事件)；
//拖动后得到容器中每一项的位置顺序。
var arr=sortable . to array()；
Console.log(位置排序，arr)；
},
};
//第三步，初始化——向拖动容器添加拖动规则。
var sortable=sortable . create(wrap，rules)；
/**
*插件自己的方法：
* 1.sortable.toArray()获取每个序列化项目元素的id属性的数组。
* 2.将拖动规则添加到拖动容器中。
* */
/脚本
/body
/html
案例二 el-table表格拖拽
这里有一个细节，就是在拖拽头部数据的时候，可能会导致渲染数据不正确的问题。有的博主搞两个头数组数据，其实是解决问题的办法。不过，愚见有点麻烦。事实上，可以使用一个头数组数据。及时清除，重新分配就行了。
效果图
代码附上
这里用的是vue，所以需要下载cnpm安装sortablejs - save。
直接复制粘贴代码运行，看效果图。请看使用说明评论。
模板
div class=myWrap
el表
:data=tableBody
边界
row-key=id
:header-cell-style={
高度：“48px”，
背景： #FAFAFA ，
颜色： #333333 ，
fontWeight:粗体，
fontSize: 14px ，
}
！-检查方框列-
El-table-column type= selection width= 48 固定/el-table-column
！-序列号栏-
El-table-column标签=序列号类型=索引宽度=50 固定
/El-表格-列
！-标题列-
El-表格-列
表头中的v-for=(item，index
:key=item.index
:prop=item.prop
:label=item.label
/El-表格-列
/el-table
br /
H3标题数据/h3
pre{{ tableHeader }}/pre
br /
H3表体数据/h3
pre{{ tableBody }}/pre
/div
/模板
脚本
//引入sortablejs插件，拖拽主要靠这个插件。
从“sortablejs”导入可排序的；
导出默认值{
data() {
返回{
//标题数据
表格标题：[
{
标签:“名称”，
道具：“名称”，
},
{
标签:“年龄”，
道具：“年龄”，
},
{
标签:“家乡”，
道具：“家”，
},
{
标签:“爱好”，
道具：“爱好”，
},
],
//表体数据
表体：[
{
id:“1”，
名字：“美猴王”，
年龄：500，
家：‘花果山’，
爱好：“吃桃子”，
},
{
id:“2”，
姓名：猪八戒，
年龄：88，
家：‘高老庄’，
爱好：“吃包子”，
},
{
id:“3”，
姓名：“沙和尚”，
年龄：1000，
家：‘通天河’，
爱好：“游泳”，
},
{
id:“4”，
姓名：唐僧，
年龄：99999，
家：‘东土大唐’，
爱好：“诵经”，
},
],
};
},
已安装(){
//拖放列的初始化
this . columndropinit()；
//线条的拖放初始化
this . rowdropinit()；
},
方法：{
//列拖动
columnDropInit() {
//第一步是获取列容器。
const wrapper column=document . query selector(。el-table__header-wrapper tr
);
//第二步，为列容器指定相应的拖放规则。
this . sortable=sortable . create(wrapper column，{
动画：500，
延迟：0，
onEnd:(事件)={
console.log(
拖动后发现表头数据没有变化，需要手动更新表头数据，
this.tableHeader
);
console.log(
根据旧索引和新索引来更新，实际上是交换位置，
event . ol index，
event.newIndex
);
//接下来，进行索引的交换
let temphambleheader=[.this . table header]；//先保存一个临时变量头数据。
让温度；//临时变量用于交换
temp=tempHableHeader[event . old index-2]；//注意这里-2是因为我在表格前面加了两列(复选框列和序列号列)。
templatableheader[event . old index-2]=
temphable header[event . new index-2]；//如果没有这两列，序号就是正常的对应关系，不需要减2。
tempHableHeader[event . new index-2]=temp；
//重要的事情说三遍！
//这里必须先清除头数据，然后在下一轮赋值，否则渲染会出错。
//这里必须先清除头数据，然后在下一轮赋值，否则渲染会出错。
//这里必须先清除头数据，然后在下一轮赋值，否则渲染会出错。
this . table header=[]；//可以尝试一下。
这个。$nextTick(()={
this . table header=temphable header；
});
},
});
},
//线条拖动
//我个人觉得没有必要加行拖，因为加了之后就不能双击选中行单元格的文字了。当然，你还是要听产品大佬们的安排。
rowDropInit() {
//第一步是获取行容器。
const wrap perrow=document . query selector(。el-table__body-wrapper tbody
);
const that=this//保存指向的副本
//第二步，为line容器指定对应的拖放规则。
Sortable.create(wrapperRow，{
onEnd({ newIndex，oldIndex }) {
//这里有另外一种方法来区分上面的列拖放。
//先删除原项，保存原项的副本，因为splice返回一个数组，数组中的第一项就是被删除的项。
const currRow=that . table body . splice(ol index，1)[0]；
//然后将此项添加到新位置
that.tableBody.splice(newIndex，0，currRow)；
},
});
},
},
};
/脚本
style lang=less 范围。myWrap {
宽度：100%；
身高：100%；
框大小：边框-框；
填充：25px
/深/。el表{。El-表格_ _标题-包装器{
tr {
th {
//将拖动样式设置得更好看
光标：移动；
}
}
}
}
}
/风格
最后附上www.sortablejs.com/或https://www.itxst.com/sortablejs/neuinffi.html,官网
关于拖动插件sortable.js实现el-table表格的拖动效果的这篇文章到此为止。有关sortable.js表格的更多相关拖动内容，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。