vue+element 使用sortable实现表格拖拽

在vue项目中使用sortable.js实现拖拽功能。官网地址:http://www.sortablejs.com/index.html

1.下载sortable.js:
npm install sortablejs --save

2.在当前页引入:
import Sortable from ‘sortablejs’

3.使用方法:

 1  mounted() {
 2     this.rowDrop();
 3   },
 4  methods: {
 5     //单选按钮可取消
 6     clickitem (index) {
 7       index=== this.labelIsexecuteTime ? this.labelIsexecuteTime = ‘‘ :
 8       this.labelIsexecuteTime = index
 9     },
10     //行拖拽
11     rowDrop() {
12       const tbody = document.querySelector(‘.el-table__body-wrapper tbody‘)
13       Sortable.create(tbody, {
14         onEnd:({ newIndex, oldIndex })=> {
15           const currRow = this.tableData.splice(oldIndex, 1)[0];
16           this.tableData.splice(newIndex, 0, currRow);
17         }
18       })
19     }
20 }

4.进行表格拖拽,图片展示

原文地址:https://www.cnblogs.com/jiazhi88/p/12134384.html

时间: 2024-10-09 21:32:51

vue+element 使用sortable实现表格拖拽的相关文章

Vue 组件总结 (一、拖拽组件 Vue-draggable)

一.vue-draggable 安装使用npm地址: https://www.npmjs.com/package/vuedraggable 二.表格拖拽使用, 举例: <table class="table table-condensed"> <thead> <tr> <th>视频ID</th> <th>名称</th> <th>作者</th> <th>创建时间<

Vue的v-for中列表项拖拽排序详细方法

首先:HTML中,关键点是监听拖拽的三个阶段,即:dragstart/dragover/dragend,注意:要拖拽元素必须加上draggable="true" <ul @dragstart="onDragStart" @dragover="onDragOver" @dragend="onDragEnd" ref="taskListUl"> <li v-for="(subTask

vue element UI el-table 给表格添加复选框,并得到所选值

<el-table @selection-change="changeCheckBoxValue" v-bind:data="this.requireData" v-loading="this.tableLoading" border style="width:100%" > <el-table-column min-width='140' type="selection"><

基于Vue实现可以拖拽的树形表格实例详解

因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插件已打包封装好,发布到npm上 本博文会分为两部分,第一部分为使用方式,第二部分为实现方式 安装方式 npm i drag-tree-table --save-dev 使用方式 import dragTreeTable from 'drag-tree-table'  模版写法 ? 1 <dragTr

Vue. 之 Element dialog 拖拽

Vue. 之 Element dialog 拖拽 默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且 一旦点击遮罩层区域,弹框就会消失. 解决方案: 1 在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl

Vue+element 需要用到拖拽组件 vuedraggable

新需求是要求界面上的14个可以拖拽,点击保存之后保存拖拽之后的顺序. 确定需求之后肯定第一时间是百度,发现有个插件vuedragger拖拽,按照教程就懵懂的开始了. 官方示例:https://david-desmaisons.github.io/draggable-example/ 1.安装 npm install vuedraggable 2.引入 import draggable from 'vuedraggable' 3.注册 components: { draggable } html

element+sortablejs插件实现拖拽排序效果

背景1.后台管理系统中表格需要实现行拖拽功能2.表格使用element组件库中el-table 方案介绍 1.Sortable.js介绍:Sortable.js是一款轻量级的拖放排序列表的js插件引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.参考地址: https://github.com/Sorta

vuejs2.0使用Sortable.js实现的拖拽功能( 转)

文章目录 简介 实现效果 html主要代码 css代码 js代码 简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例

利用插件(jQuery-ui.js)实现表格行的拖拽排序

template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<table class="table-common" id="aggVDtTable"> <thead> <tr style="width: 100%;"> <th class="th1" style