基于Vue 表格行上下移动

在日常开发工作中常常会用到Vue.js，在比较旧的系统中也能很快的介入其中，在一些特效上也能通过vue简单快速的实现

直接开撸，用Vue实现表格中行的动态上移下移。
html代码:

<div id="app" class="demo"><table class="table table-striped"><thead><th>id</th><th>value</th><th>向上</th><th>向下</th></thead><tbody is="transition-group" name="flip-list"><tr v-for="(item,index) in items" :key="item.id"><td>{{item.id}}</td><td>{{item.value}}</td><td><button :disabled="index==0" @click="topItem(index)">向上</button></td><td><button :disabled="index==items.length-1" @click="bottomItem(index)">向下</button></td></tr></tbody></table>
</div>

css 代码(来点好看的样式):

.flip-list-move {transition: transform 1s;
}body {background: #20262E;padding: 20px;font-family: Helvetica;
}#app {background: #fff;border-radius: 4px;padding: 20px;transition: all 0.2s;
}

js代码：

new Vue({el: '#app',data: {items: [{id: 1,value: 'text1'}, {id: 2,value: 'text2'}, {id: 3,value: 'text3'}, {id: 4,value: 'text4'}]},methods: {topItem: function(index) {[this.items[index], this.items[index - 1]] = [this.items[index - 1], this.items[index]]this.items.sort()},bottomItem: function(index) {[this.items[index], this.items[index + 1]] = [this.items[index + 1], this.items[index]]this.items.sort()},}
})

最后效果：

上述代码我的JSRUN地址：

http://jsrun.net/LzWKp/edit

基于Vue 表格行上下移动相关推荐

说说如何基于 Vue.js 实现表格组件
我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在 ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
基于vue 通过数据过滤实现表格合并
基于vue 通过数据过滤实现表格合并需求基于vue渲染的数据表格需要对相同的列进行合并思路自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到row ...
基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
vue横向树结构_基于vue.js实现树形表格的封装
基于vue.js实现树形表格的封装(vue-tree-table) 前言由于公司产品(基于vue.js)需要,要实现一个树形表格的功能,百度.google找了一通,并没有发现很靠谱的,也不是很灵活.所 ...
实习总结第七谈-----------vue中element-ui的表格行高怎么控制
依旧在我负责的当前项目中举例子: 我的表格要求是一页只显示10条数据,且纵向不能产生滚动条,这样就意味着不能设置表格的整体高度来控制,那样会会产生滚动条,要么在表格纵向产生滚动条,要么在屏幕纵向产生滚 ...
基于Vue实现表格拖拽排序——sortablejs
表格拖拽排序 1.安装插件 2.页面引入sortablejs 3.准备表格渲染所需的数据 4.绘制表格结构(要绑定唯一的值row-key,不然会出错) 5.完成表格行与列的拖拽排序事件 1.安装插件 ...
phpexcel_cell 获取表格样式_Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...
精品推荐国内稀缺优秀Java全栈课程-Vue+SpringBoot通讯录系统全新发布! Docker快速手上视频教程(无废话版)[免费] 作者:E-iceblue https://www.cnblo ...
vue 移动到图片浮动_基于Vue实现拖拽升级（九宫格拖拽）
前言在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局.具体代码以及demo可以点以下超链接进入效果实例 Demo 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称 ...

基于Vue 表格行上下移动

基于Vue 表格行上下移动

基于Vue 表格行上下移动相关推荐

最新文章

热门文章