作者:孜雪颖2000 | 来源:互联网 | 2023-08-17 20:00
本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码,供大家参考,具体内容如下
效果如下:
1.vue使用cli创建项目就不说了,本人使用的是cli3.x版本
2.下载element-ui
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.效果图的全部代码
v-for="(item, index) in col"
:key="`col_${index}`"
:prop="dropCol[index].prop"
:label="item.label"
>
{{ dropCol }}
{{ tableData }}