element树形表格拖拽,element 拖拽
本文主要介绍了元素表格行列拖拽的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
元素用户界面表格没有自带的拖拽排序的功能，只能借助第三方插件排序表来实现，先来看一下动态图，效果是不是你们想要的。
首先需要安装Sortable.js
新公共管理安装排序表-保存
然后引用
从"排序表"导入可排序的
需要注意的是元素表务必指定行键，行键必须是唯一的，如ID，不然会出现排序不对的情况。
###示例代码
模板
div style=width:800px
el-table :data=tableData
边界
row-key=id
align=left
El-table-col v-for=(item，index) in col
:key=`col_${index} `
:prop=dropCol[index].道具
:label=item.label
/El-表格-列
/el-table
pre style=text-align: left
{{dropCol}}
/pre
整点
pre style=text-align: left
{{tableData}}
/pre
/div
/模板
脚本
从"排序表"导入可排序的
导出默认值{
data() {
返回{
列：[
{
标签: 日期，
道具："日期"
},
{
标签: 姓名，
道具："名称"
},
{
标签: 地址，
属性："地址"
}
],
dropCol: [
{
标签: 日期，
道具："日期"
},
{
标签: 姓名，
道具："名称"
},
{
标签: 地址，
属性："地址"
}
],
表格数据：[
{
id:“1”，
日期："2016年5月2日",
名称： 王小虎1,
地址： 上海市普陀区金沙江路100 弄
},
{
id:“2”，
日期："2016年5月四日",
名称： 王小虎2,
地址： 上海市普陀区金沙江路200 弄
},
{
id:“3”，
日期："2016年5月一日",
名称： 王小虎3,
地址： 上海市普陀区金沙江路300 弄
},
{
id:“4”，
日期："2016年5月3日",
名称： 王小虎4,
地址： 上海市普陀区金沙江路400 弄
}
]
}
},
已安装(){
this.rowDrop()
this.columnDrop()
},
方法：{
//行拖拽
rowDrop() {
const tbody=document。查询选择器(.El-table _ _ body-wrapper tbody’)
const _this=这个
Sortable.create(tbody，{
onEnd({ newIndex，oldIndex }) {
const currRow=_ this。表格数据。拼接(ol索引，1)[0]
_这个。表格数据。拼接(新索引，0，当前行)
}
})
},
//列拖拽
columnDrop() {
const wrap pertr=文档。查询选择器(.El-table _ _ header-wrapper tr’)
这个。可排序=可排序。创建(wrap pertr，{
动画：180,
延迟：0,
onEnd: evt={
const旧项目=this。drop col[evt。旧索引]
这个。下降列拼接(evt。旧索引，1)
这个。下降列拼接(evt。新索引，0，oldItem)
}
})
}
}
}
/脚本
样式范围
/风格
到此这篇关于元素表格行列拖拽的实现示例的文章就介绍到这了，更多相关元素表格行列拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。