vue+element拖动排序功能

项目中老大心血来潮设计了一可以拖动达到排序的功能,感觉没什么用,但是没办法,实现吧!


这功能肯定不会手撸了,直接上插件

使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.

  教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741

  教程地址:https://blog.csdn.net/zhaoxiang66/article/details/81003094

  1. 安装npm install vuedraggable -S(可能需要安装Sortable)
  2. 引用import draggable from ‘vuedraggable‘
  3. 注册组件components: { draggable },
  4. 通过draggable标签来使用
  5. 调用update方法,此方法事件对象返回新索引和旧索引,同样数据是响应式的.

template代码:

 1 <draggable v-model="codeList" @update="datadragEnd" :options="{animation:200}">
 2           <div class="drag-item" v-for="(item,i) in codeList" :key="i">
 3             <el-row>
 4               <el-col class="line" :span="6">&nbsp;{{item.field_title}}</el-col>
 5               <el-col class="line" :span="8">
 6                 <el-switch
 7                   v-model="item.is_show"
 8                   active-color="#13ce66"
 9                   @change="lockChange(item)"
10                   :active-value="1"
11                   :inactive-value="0"
12                 ></el-switch>
13               </el-col>
14               <el-col :span="8">
15                 <el-button type="text" size="mini" @click="showEditCode(item)">编辑</el-button>
16                 <el-button
17                   v-if="item.is_system != 1"
18                   type="text"
19                   size="mini"
20                   @click="deleCode(item)"
21                 >删除</el-button>
22               </el-col>
23             </el-row>
24           </div>
25         </draggable>

methods代码:

 1 async datadragEnd(evt) {
 2       evt.preventDefault();
 3       // console.log(‘拖动前的索引 :‘ + evt.oldIndex)
 4       // console.log(‘拖动后的索引 :‘ + evt.newIndex)
 5       // 遍历数组,将索引值赋值到对应的sort_order上面,完成排序
 6       let arr = this.codeList;
 7       let newArr = await arr.map((item, i) => {
 8         return {
 9           sort_order: i,
10           field_code: item.field_code
11         };
12       });
13       const res = await this.$axios.post(`customer/save_order`, {
14         list: newArr
15       });
16       // console.log(res)
17       const { error, message } = res.data;
18       if (error == 0) {
19         this.$message.success(message);
20       }
21     },    

原文地址:https://www.cnblogs.com/jun-qi/p/10894916.html

时间: 2024-10-12 21:19:34

vue+element拖动排序功能的相关文章

IOS UITableView拖动排序功能

UITbableView作为列表展示信息,除了展示的功能,有时还会用到删除,排序等功能,下面就来讲解一下如何实现排序. 排序是当表格进入编辑状态后,在单元格的右侧会出现一个按钮,点击按钮,就可以拖动单元格,移动位置,进行手动排序. 使用系统自带拖动排序功能的步骤: 1.让tableView进入编辑状态,也就是设置它的editing为YES 2.返回编辑模式,也就是实现UITableViewDelegate中的tableview:editingStyleForRowAtIndexPath:方法,在

vue+element打印页面功能

项目中遇到了要打印页面的功能,我感觉我这个方法不太好,欢迎各位来改善指导 使用print插件  https://github.com/xyl66/vuePlugs_printjs 教程地址::https://blog.csdn.net/peiyongwei/article/details/82460709 在min.js中引入 import Print from '@/plugs/print' Vue.use(Print) // 注册 1 <template> 2 3 <section

Yii2的GridView实现拖动排序功能

本功能同样适用于其他的框架或者原生的程序(需要根据实际情况做修改) 1.本功能参考地址:https://www.cnblogs.com/xiuber/p/5945597.html 2.本功能必须先引入jquery和jquery-ui(注意引入先后顺序) 前端代码: <?= GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ ['class' => 'yii\grid\SerialColumn'], '

jquery 鼠标拖动排序Li或Table

1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

Vue+Element实现网页版个人简历系统

这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大的毛病.但是还有很多小功能还不完善,代码也未进行优化,后续会继续完善功能,优化代码. 声明:项目相对来说就是一个纯静态页面,代码都比较简单,大佬可闭眼绕过,或者看一眼留下宝贵意见也可 一.项目介绍 本项目是一个网页版的个人简历系统,主要使用的技术为vue2+element进行实现. 个人简历系统主要

Vue Element+Node.js开发企业通用管理后台系统

第1章 课程介绍介绍项目背景.达到的目标.技术栈和功能演示 第2章 课程分析课程分析 第3章 Vue进阶(上)对Vue的进阶知识进行讲解,包括$emit和$on.directive指令.组件化.Vue插件等相关内容. 第4章 Vue进阶(下)对Vue的进阶知识进行讲解,包括组件通信.过滤器.监听器.Vue2.6重要新特性等相关内容. 第5章 Element-UI入门对Element-UI的内容进行讲解,包括如何搭建Element-UI使用环境,如何使用插件快速集成Element-UI,并通过el

Vue Element+Node.js开发企业通用管理后台系统完整教程

资源获取链接:点击获取完整教程 Vue Element+Node.js开发企业通用管理后台系统 综合应用 Vue 和 Node 技术,基于 Element-UI 组件库搭建“小慕读书“的管理后台,通过 Node 实现了电子书上传和解析功能以及权限管理.课程对 Vue 和 Node 有较为深入的应用,不仅会教大家如何实现功能,更会讲解技术背后的原理,帮助大家做到举一反三.课程面向中高级开发者,提供完整的开发文档和API支持,让大家可以快速上手实战 准备阶段 准备工作 Nginx 服务器MySQL

MYSQL-实现ORACLE 和SQLserver数据中- row_number() over(partition by ) 分组排序功能

网上看见了好多例子都基本上是一样的,没有过多的解释,对于一个初学MySQL来说有点难,我把部分转摘过来如下 原文:http://www.cnblogs.com/buro79xxd/archive/2012/08/29/2662489.html 要求目标:1.确定需求: 根据部门来分组,显示各员工在部门里按薪水排名名次. 创建表格:2.来创建实例数据: drop table if exists heyf_t10; create table heyf_t10 (empid int ,deptid i

锋利的jQuery-7--query ui效果库--拖动排序插件sortable

一个简单的拖动排序效果,具体请参看jQuery ui官网demo. jquery ui :http://jqueryui.com/ sortable例子:http://jqueryui.com/sortable/#portlets 效果如图: html代码: <style type="text/css"> #myList{width: 80px;background: #EEE;padding: 5px;list-style: none;} #myList a{text-d