Vue实现table上下移动功能示例
本文实例讲述了Vue实现table上下移动功能。分享给大家供大家参考,具体如下:
结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容、列内容、以及此行索引值,
table上绑定数组 :data="tableList"
<el-table :data="tableList"> </el-table>
添加一列,里面放上上移和下调两个按钮,并绑定上函数,将此行的索引值(scope.$index
)作为参数,样式根据需求自己调整:
<el-button icon="el-icon-arrow-up" :disabled="scope.$index === 0" @click="upFieldOrder(scope.$index)"></el-button> <el-button icon="el-icon-arrow-down" :disabled="scope.$index === tableList.length - 1" @click="downFieldOrder(scope.$index)"></el-button>
直接使用下面这种方式是错误的,虽然tableList的值变了,但是不会触发视图的更新:
upFieldOrder (index) { let temp = this.tableList[index-1]; this.tableList[index-1] = this.tableList[index] this.tableList[index] = temp },
正确的上移函数:
upFieldOrder (index) { let temp = this.tableList[index-1]; Vue.set(this.tableList, index-1, this.tableList[index]) Vue.set(this.tableList, index, temp) },
同理,下移函数如下:
downFieldOrder (index) { let i = this.tableList[index+1]; Vue.set(this.tableList, index+1, this.tableList[index]) Vue.set(this.tableList, index, i) }
如此,前端的调整table顺序功能便做好了,我不是在每一次点击都与后台交互传入新Order,在页面销毁时,一并提交:
destroyed() { let param = { infos: [] } this.tableList.forEach((dataItem,index) => { param.infos.push({ 参数1: dataItem.值1, 参数1: dataItem.值2, 参数顺序: index }) }); // 调用后台,并传入 param changeTableOrder(param).then(res => { if(res.success=== true) { alert('顺序调整成功') } }) }
希望本文所述对大家vue.js程序设计有所帮助。
相关推荐
-
vue2.0使用Sortable.js实现的拖拽功能示例
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载. 实现效果 实现后的效果如图所示:
-
VUE element-ui 写个复用Table组件的示例代码
饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是--个人对于它以列为单位的操作不习惯 =.=所以改成了另一种方式(我不会告诉你其实本质没变). 项目中表格较多,所以复用性最重要 步骤一 先来个基本的表格展示 官例的tableData tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address:
-
vue2.0在table中实现全选和反选的示例代码
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 demo的 git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 使用localstorage来存储页面信息中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.vue文件 <temp
-
浅谈vue的iview列表table render函数设置DOM属性值的方法
如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属
-
vue element table 表格请求后台排序的方法
1.ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据. <el-table :data="playerTableData" border style="width: 100%" :default-sort = "{prop: 'outlay', order: 'descendin
-
vue element-ui table表格滚动加载方法
添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.
-
对Vue table 动态表格td可编辑的方法详解
项目中需求用到可编辑表格 下图这种 ↓ element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化. <el-table-column label="名称" width="140"> <template scope="scope"> <el-input v-if="scope.row.isEdit && scope
-
使用vue的v-for生成table并给table加上序号的实例代码
现在有一个使用mybatis的分页插件生成的table,table中数据是通过vue获得的 , 前台显示使用<tr v-for="item in items"> 后台vue获取数据使用分页插件进行查询然后使用回调,将结果返回给vue的一个model /** * 分页控件加载 * @param data */ function aspnetPagerInfoIM(pageDataShow,pageModule,resource, modelCallBack) { var pa
-
基于vue2的table分页组件实现方法
本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下 pagination.js: (function(){ var template = '<div class="page-bar" > \ <div class="info">{{info}}</div>\ <div class="showpages">每页<select class="showpa
-
Vue实现table上下移动功能示例
本文实例讲述了Vue实现table上下移动功能.分享给大家供大家参考,具体如下: 结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容.列内容.以及此行索引值, table上绑定数组 :data="tableList" <el-table :data="tableList"> </el-table> 添加一列,里面放上上移和下调两个按钮,并绑定上函数,将此行的索引值(scope.$index)作为参数,
-
详解vue实现坐标拾取器功能示例
需求 1.搜索具体地址,自动填写经纬度,并在地图上标记 2.点击地图上一点,可重新填写经纬度并且标记 代码 在dom新建div渲染地图 <el-form-item label="店铺地址" prop="address"> <el-input v-model="fristForm.address"></el-input> <el-input class="long-lat" v-mode
-
Vue自定义指令拖拽功能示例
下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1
-
vue实现组件之间传值功能示例
本文实例讲述了vue实现组件之间传值功能.分享给大家供大家参考,具体如下: slot标签: 想向封装好结构的组件中插入内容,需要借助<slot></slot> 在组件之中进行关联:如 模板中: <slot name='txt'></slot> 组件调用中: <p slot='txt'></p> 注:如果只有slot上面每一定义name属性,则只能有一个slot <div class='box'> <com> &
-
vue.js实现的幻灯片功能示例
本文实例讲述了vue.js实现的幻灯片功能.分享给大家供大家参考,具体如下: 1.在父组件中 <slide-show :slides="slides"></slide-show> import SlideShow from '@/components/SlideShow' export default { components: { SlideShow, }, 2.在slideshow.vue中 <template> <div class=&q
-
vue+element实现批量删除功能的示例
今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下: 1.如何实现单击行交替选中当前行的复选框,element官网的table实例中没有找到.--通过row-click和toggleRowSelection实现 2.如何获取选中行的值来实现批量删除.--通过selection-change实现 代码如下 html: <div class="row mt30 pl15"> <el-button type="warning
-
SpringBoot+Vue+Axios+BootStrap实现图书的增删改查功能示例
目录 一.开发工具 二.项目结构 三.编写项目 四.运行项目 由于是初学Vue.Axios,可能在界面和功能上存在着一些问题,但这些并不妨碍使用.如果有对编程感兴趣的朋友,可以试着做一做.这个由于是第一次做,不太熟练.在后续的过程中会不断的完善. 一.开发工具 IntelliJ IDEA Ultimate 2021.1 apache-maven-3.5.4 MySQL5.7 JDK 1.8.0_281 二.项目结构 三.编写项目 1.创建数据库 SET NAMES utf8mb4; SET FO
-
vue loadmore组件上拉加载更多功能示例代码
最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d
-
vue项目实现记住密码到cookie功能示例(附源码)
本文介绍了vue项目实现记住密码到cookie功能示例,分享给大家,具体如下: 登陆页面 实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/删cookie实现的:每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存
-
Vue+element-ui 实现表格的分页功能示例
本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum
随机推荐
- 基于Node.js实现nodemailer邮件发送
- 键盘控制事件应用教程大全
- 图解RedHat AS4.0硬盘版安装教程
- CentOS 7.2配置Apache服务httpd(上)
- 基于匀速运动的实例讲解(侧边栏,淡入淡出)
- javascript 操作符(~、&、|、^、<<、>>)使用案例
- excel操作之Add Data to a Spreadsheet Cell
- 解决使用良精企业建站7.0未注册问题
- Android中WebView用法实例分析
- PHP 中文处理技巧
- 使用PHP遍历文件目录与清除目录中文件的实现详解
- destoon在360浏览器下出现用户被强行注销的解决方法
- Java不可变类机制浅析
- jQuery实现的原图对比窗帘效果
- js函数名与form表单元素同名冲突的问题
- 不同方式遍历Map集合(全)
- yii实现级联下拉菜单的方法
- PopupWindow仿微信浮层弹出框效果
- VSCode下好用的Python插件及配置
- Python编程实现使用线性回归预测数据