element table 可拖拽,elementui实现拖拽
这篇文章主要为大家详细介绍了某视频剪辑软件元素-ui sortable.js实现表格拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素-ui sortable.js实现表格拖拽的具体代码，供大家参考，具体内容如下
效果如下：
1.vue使用硬币指示器(硬币水平指示器的缩写)命令行界面(批处理脚本的命令行界面)创建项目就不说了，本人使用的是cli3.x版本
2.下载元素-用户界面
国家预防机制一元素-ui -S
3.引入元素-ui，找到main.js，加入如下代码
//导入元素-ui，和全局使用元素-用户界面样式
从"元素-用户界面"导入ElementUI
导入“元素-ui/lib/主题-粉笔/索引。CSS”；
//使用ElementUI组件库
vue。使用(元素ui)；
4.下载sortablejs，官网为http://www.sortablejs.com/index.html,可在里面看你需要的效果（配置项)
新公共管理安装排序表-保存
5.效果图的全部代码
模板
div style=width:800px
El-table:data= table data border row-key= id align= left
埃尔-表格-列
列中的v-for=(项目，索引
:key=`col_${index} `
:prop=dropCol[index].道具
:label=item.label
/El-表格-列
/el-table
！-前：json数据格式化展示-
pre style=text-align: left
{{ dropCol }}
/pre
人力资源/
pre style=text-align: left
{{ tableData }}
/pre
/div
/模板
脚本
从"排序表"导入可排序的；
导出默认值{
data() {
返回{
列：[
{
标签: 日期，
道具："日期"
},
{
标签: 姓名，
道具："名称"
},
{
标签: 地址，
属性："地址"
}
],
dropCol: [
{
标签: 日期，
道具："日期"
},
{
标签: 姓名，
道具："名称"
},
{
标签: 地址，
属性："地址"
}
],
表格数据：[
{
id:“1”，
日期："2019-12-23",
名称： 王小虎1,
地址： 上海市普陀区金沙江路100 弄
},
{
id:“2”，
日期："2019-12-22",
名称： 王小虎2,
地址： 上海市普陀区金沙江路200 弄
},
{
id:“3”，
日期："2019-12-21",
名称： 王小虎3,
地址： 上海市普陀区金沙江路300 弄
},
{
id:“4”，
日期："2019-12-20",
名称： 王小虎4,
地址： 上海市普陀区金沙江路400 弄
}
]
};
},
已安装(){
这个。row drop()；
这个。列drop()；
},
方法：{
//行拖拽
rowDrop() {
const tbody=document。查询选择器(.El-table _ _ body-wrapper tbody )；
const _ this=这个
Sortable.create(tbody，{
//官网上的配置项，加到这里面来，可以实现各种效果和功能
动画：150,
幽灵类："蓝色背景类",
onEnd({ newIndex，oldIndex }) {
const currRow=_ this。表格数据。splice(ol index，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，旧项目)；
}
});
}
}
};
/脚本
样式范围/样式
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。