vue实现的一个撤销和恢复功能

1、有三个表格
2、添加不同得数据
3、在点击撤销时删除最后一条添加的数据，在点击恢复时复原删除的数据

<template><div style="width:1000px;margin:0 auto"><Button type="info" @click="handleOk">添加</Button><Table :columns="columns" :data="datas"></Table><Button type="info" @click="handleOkOne">添加</Button><Table :columns="columnsOne" :data="datasOne"></Table><Button type="info" @click="handleOkTwo">添加</Button><Table :columns="columnsTwo" :data="datasTwo"></Table><Button @click="handleRevoke">撤销</Button><Button type="primary" @click="handleRecovery">恢复</Button></div>
</template>

顺序存储：用js内置对象Array实现定义一个栈

function ArrayStack () {let arr = [];// 压入栈中  this.push = function (element) {arr.push(element);}// 弹出栈顶元素  this.pop = function () {return arr.pop();}// 查看栈顶元素  this.top = function () {return arr[arr.length - 1];}// 获取栈长  this.size = function () {return arr.length;}// 清空栈  this.clear = function () {arr = [];return true;}this.toString = function () {return arr.toString();}
}

export default {data () {return {columns: [{ type: 'index', width: 60, align: 'center' },{ title: 'Name', key: 'name' },{ title: 'Age', key: 'age' },{ title: 'Address', key: 'address' }],datas: [],columnsOne: [{ type: 'index', width: 60, align: 'center' },{ title: 'Name', key: 'name' },{ title: 'Age', key: 'age' },{ title: 'Address', key: 'address' }],datasOne: [],columnsTwo: [{ type: 'index', width: 60, align: 'center' },{ title: 'Name', key: 'name' },{ title: 'Age', key: 'age' },{ title: 'Address', key: 'address' }],datasTwo: [],stackRevoke: new ArrayStack(), //撤销栈stackRecovery: new ArrayStack() //恢复栈}},methods: {// 添加时向恢复栈中加数据handleOk () {let obj = { id: 'text001', name: '北京市', age: 18, address: '北京', code: '1001' }this.datas.push(obj)this.stackRecovery.push(obj)},handleOkOne () {let obj = { id: 'text005', name: '石家庄市', age: 18, address: '河北省', code: '1002' }this.datasOne.push(obj)this.stackRecovery.push(obj)},handleOkTwo () {let obj = { id: 'text009', name: '杭州市', age: 18, address: '浙江省', code: '1003' }this.datasTwo.push(obj)this.stackRecovery.push(obj)},// 撤销(删除)handleRevoke () {let p = this.stackRecovery.pop() //读取恢复栈顶数据if (p !== undefined) {switch (p.code) {case '1001': {if (this.datas.length > 0) {let p = this.datas.pop()this.stackRevoke.push(p) //向删除栈中增加数据}}break;case '1002': {if (this.datasOne.length > 0) {let p = this.datasOne.pop()this.stackRevoke.push(p)}}break;case '1003': {if (this.datasTwo.length > 0) {let p = this.datasTwo.pop()this.stackRevoke.push(p)}}break;}}},// 恢复(复原)handleRecovery () {let p = this.stackRevoke.pop() //读取撤销栈中得第一条数据if (p !== undefined) { //判断取出对象是否存在switch (p.code) { //判断是哪一个数组下得数据case '1001':this.stackRecovery.push(p) //向恢复栈中添加数据this.datas.push(p) //向指定数组添加数据break;case '1002':this.stackRecovery.push(p)this.datasOne.push(p)break;case '1003':this.stackRecovery.push(p)this.datasTwo.push(p)break;}}}}
}
</script>

vue实现的一个撤销和恢复功能相关推荐

我们常用的撤销和恢复功能，你知道它们使用了什么设计模式吗？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 滴水微澜来源 | cnblogs.com/z ...
js实现撤销恢复_我们常用的撤销和恢复功能，它们使用了什么设计模式实现吗？...
现有场景描述: 现在无论是系统自带的键盘还是第三方的键盘一般都自带撤销和恢复功能,你知道它们是用的什么模式实现的吗? 它们用的是命令模式+观察者模式,你答对了吗? 简单科普一下啥是命令模式(Comm ...
再涨个姿势，我们常用的撤销和恢复功能，你知道它们使用了什么设计模式实现吗？...
作者:滴水微澜 cnblogs.com/zhou--fei/p/9905536.html 现有场景描述: 现在无论是系统自带的键盘还是第三方的键盘一般都自带撤销和恢复功能,你知道它们是用的什么模式实现 ...
java 撤销恢复按钮_再涨个姿势，我们常用的撤销和恢复功能，你知道它们使用了什么设计模式实现吗？...
作者:滴水微澜现有场景描述:现在无论是系统自带的键盘还是第三方的键盘一般都自带撤销和恢复功能,你知道它们是用的什么模式实现的吗? 它们用的是命令模式+观察者模式,你答对了吗? 简单科普一下啥是命令 ...
[vue] 用vue怎么实现一个换肤的功能？
[vue] 用vue怎么实现一个换肤的功能? 这个--全局的theme属性然后做class判断或者加载不同的样式文件.一种是编译时换肤一种是用户操作换肤.编译时换肤可以通过css in js相关技术 ...
qt实现撤销和恢复功能
from PyQt5.QtWidgets import QUndoStack, QUndoCommandclass Test(object):def __init__(self):super().__ ...
js实现撤销恢复功能
Js实现撤销恢复功能之前一个项目要自己写个前端插件,其中一个的功能是实现对表格(table)的撤销和恢复功能,在网上百度了一大堆也没有找到合适的方法,后来灵光一闪,想到了一个简单的方法:用数组保存之 ...
java 撤销恢复按钮_java文本的撤销和恢复
文本的撤销和恢复是通过 addUndoableEditListener(UndoableEditListener listener)这个方法来注册实现的.只要是Document类及其子类都可以注册撤销 ...
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下: <template> <div><div id="cart" v-cloak ...

vue实现的一个撤销和恢复功能

vue实现的一个撤销和恢复功能相关推荐

最新文章

热门文章