vue+element-ui+sortable.js实现表格拖拽功能
作者:麦兜:) 时间:2024-04-09 11:00:11
本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码,供大家参考,具体内容如下
效果如下:
1.vue使用cli创建项目就不说了,本人使用的是cli3.x版本
2.下载element-ui
npm i element-ui -S
3.引入element-ui,找到main.js,加入如下代码
// 导入element-ui,和全局使用element-ui样式
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// 使用 ElementUI 组件库
Vue.use(ElementUI);
4.下载sortablejs,官网为http://www.sortablejs.com/index.html,可在里面看你需要的效果(配置项)
npm install sortablejs --save
5.效果图的全部代码
<template>
<div style="width:800px">
<el-table :data="tableData" border row-key="id" align="left">
<el-table-column
v-for="(item, index) in col"
:key="`col_${index}`"
:prop="dropCol[index].prop"
:label="item.label"
>
</el-table-column>
</el-table>
<!-- pre:json数据格式化展示 -->
<pre style="text-align: left">
{{ dropCol }}
</pre>
<hr />
<pre style="text-align: left">
{{ tableData }}
</pre>
</div>
</template>
<script>
import Sortable from "sortablejs";
export default {
data() {
return {
col: [
{
label: "日期",
prop: "date"
},
{
label: "姓名",
prop: "name"
},
{
label: "地址",
prop: "address"
}
],
dropCol: [
{
label: "日期",
prop: "date"
},
{
label: "姓名",
prop: "name"
},
{
label: "地址",
prop: "address"
}
],
tableData: [
{
id: "1",
date: "2019-12-23",
name: "王小虎1",
address: "上海市普陀区金沙江路 100 弄"
},
{
id: "2",
date: "2019-12-22",
name: "王小虎2",
address: "上海市普陀区金沙江路 200 弄"
},
{
id: "3",
date: "2019-12-21",
name: "王小虎3",
address: "上海市普陀区金沙江路 300 弄"
},
{
id: "4",
date: "2019-12-20",
name: "王小虎4",
address: "上海市普陀区金沙江路 400 弄"
}
]
};
},
mounted() {
this.rowDrop();
this.columnDrop();
},
methods: {
//行拖拽
rowDrop() {
const tbody = document.querySelector(".el-table__body-wrapper tbody");
const _this = this;
Sortable.create(tbody, {
// 官网上的配置项,加到这里面来,可以实现各种效果和功能
animation: 150,
ghostClass: "blue-background-class",
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
}
});
},
//列拖拽
columnDrop() {
const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex];
this.dropCol.splice(evt.oldIndex, 1);
this.dropCol.splice(evt.newIndex, 0, oldItem);
}
});
}
}
};
</script>
<style scoped></style>
来源:https://blog.csdn.net/qq_40544291/article/details/103664668
标签:vue,sortable.js,表格拖拽
0
投稿
猜你喜欢
Blender Python编程实现批量导入网格并保存渲染图像
2021-06-09 04:21:20
Python从数据库读取大量数据批量写入文件的方法
2024-01-27 14:48:10
python多线程实现动态图绘制
2023-10-22 21:53:53
python实现余弦相似度文本比较的示例
2023-01-18 09:17:48
MySQL下载安装及完美卸载的详细过程
2024-01-17 18:39:17
浅谈Python浅拷贝、深拷贝及引用机制
2023-01-03 10:28:23
Python lxml模块的基本使用方法分析
2023-01-31 04:59:40
Python抽象基类的定义与使用方法
2021-07-31 21:48:43
用 Django 开发一个 Python Web API的方法步骤
2021-05-24 02:36:11
asp实现通过session来统计在线人数的方法
2007-08-13 12:56:00
MySQL Packet for query is too large 问题及解决方法
2024-01-29 07:55:52
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2023-10-01 01:43:31
Python数据可视化:顶级绘图库plotly详解
2021-04-09 19:37:13
详解go语言单链表及其常用方法的实现
2024-02-21 03:13:41
个人微信公众号接入ChatGPT的教程分享
2023-04-08 00:34:02
实例:ASP与ACCESS链接
2008-11-21 16:10:00
PyTorch中Tensor的数据统计示例
2021-03-05 01:04:53
深入理解 ES6中的 Reflect用法
2024-04-16 09:30:44
删除sqlserver数据库日志和没有日志的数据库恢复办法
2024-01-21 23:20:55
再谈CSS样式表书写风格
2009-03-30 16:09:00