vue的表单编辑删除,保存取消功能
过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了。(心将塞未塞,欲塞未满)
VUE+ElementUI 的表单编辑,删除,保存,取消功能
VUE的表单
<el-form :label-position="labelPosition" label-width="120px" :model="form" ref="form">
<el-form-item label="商品名称" required>
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="商品数量" required>
<el-input v-model="form.number" autocomplete="off"></el-input>
</el-form-item>
</el-form>
当然,表单还有下拉选择框,radio表单等,在下面这个ElementUI官方组件
http://element-cn.eleme.io/#/zh-CN/component/form
比较重要的是是标红的那两个属性,然后下面的data返回的数据时,要在form里把model里的两个值,写进去。
data () {
return {
labelPosition: 'right',
form: {
name: '',
number: ''
}
}
}
而不能把写成空,form: {}
这样的写法,数据传过来的时候,会接收不到数据,需要name和number占位,你才能把数据传过来。
然后是编辑,删除功能
先是编辑,删除按钮的绑定
<el-table-column
prop="option"
label="操作"
style="width:250px">
<template slot-scope="scope">
<el-button
size="mini"
type="info"
@click="handleEdit(scope.$index,scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index,scope.row)">删除
</el-button>
</template>
</el-table-column>
编辑函数
handleEdit (index, row) {
console.log(index, row)
this.idx = index
this.editarr = row.number
this.editVisible = true
},
handleDelete (index, row) {
console.log(index, row)
this.idx = index
this.msg = row
this.delarr.push(this.msg.number)
this.delVisible = true
},
然后data里,要把editVisible: false 和delVisible: false 放进return里去
至于index和row两个参数,是下标和行数据
接下来,写dialog编辑框
<el-dialog title="编辑商品"
:visible.sync="edit"
@close="closingDiag"
width="80%">
<el-form :label-position="labelPosition" label-width="120px" :model="form" ref="form">
<el-form-item label="商品名称" prop="name" required>
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="单品价" prop="one" required>
<el-input v-model="form.one" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="danger" @click="resetForm('form')">取消</el-button>
<el-button type="primary" @click="editDo">保存</el-button>
</div>
</el-dialog>
删除框
<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
<div class="del-dialog-cnt">删除不可恢复,是否确定删除?</div>
<span slot="footer" class="dialog-footer">
<el-button @click="delVisible = false">取消</el-button>
<el-button type="primary" @click="deleteRow">确定</el-button>
</span>
</el-dialog>
我这边用的,是把编辑dialog放在另一个组件,通过组件导进来。
就需要在新的edit.vue的data里,edit:false
关闭模态框
closingDiag: function () {
this.$emit('close-edit', true)
},
取消功能
resetForm: function (formName) {
this.editVisible = false;
this.$refs.form.resetFields();
},
保存功能
editDo () {
let formData = new FormData();
formData.append('name', this.form.name)
formData.append('number', this.form.number)
let config = {headers: {'Content-Type': 'multipart/form-data'}}
this.$http.post('/man/edit', formData, config).then((response) => {
this.$message({
type: 'success',
message: '保存成功!'
})
this.$emit('close-edit', true)
}, (error) => {
console.log('error')
this.$message.error('保存失败' + error.res.data.msg)
})
}
噢对了,还有个最重要的一点,要写props(内置属性),watch(监听才能弹窗)
props: {
'editVisible': Boolean
}
watch: {
editVisible: function () {
this.manedit = this.editVisible
console.log(this.manedit)
this.showEdit()
}
然后显示编辑弹窗
showEdit: function () {
this.$http.post('/manedit', {params: {number: this.editarr}}).then(res => {
console.log(res)
console.log(this.form)
this.form.name = res.data.data.name
this.form.number = res.data.data.number
this.form.style = res.data.data.style
console.log(this.form)
}, (res) => {
console.log('获取信息失败' + res)
})
}
突然感觉写的有点乱乱的,但这些是真的都要写的,有不懂的可以在下面提问,或者去其他博客搜搜,感觉我应该写两个博客分开写,不然根本讲不清楚。。。。算了,我继续说,那既然你写的是组件,那肯定原来的主页面也要引用,如下代码
<edit :edit-visible="editVisible" @close-edit="editVisible = false"/>
导入组件
import edit from './edit.vue' export default {
components: {
edit
}
}
确定删除的功能
deleteRow () {
this.$http.post('delete', {params: {delarr: this.delarr}}).then((res) => {
this.$message({
type: 'success',
message: '删除成功!'
})
}, (error) => {
this.$message.error('删除失败' + error.res.data.msg)
})
this.delVisible = false;
}
还有我用到了批量删除功能,但是这里就不写了,因为篇幅太长了,但是我看的链接可以分享给你们
https://my.oschina.net/u/3763385/blog/1928536
还有mock.js写假数据的链接,以后的博客我会再写,我自己找的链接知识
https://zhuanlan.zhihu.com/p/30354374
或者双击实现表格内单元格编辑的功能
https://jsfiddle.net/bgfxv3eu/
你也可以用JS实现编辑框。
某大神的代码:
然后,在<el-table>标签里加上这个@dblclick="tableDbEdit",功能是下面,注意的是功能那里别写参数,功能那里再写参数,不然会报错
tableDbEdit (row, column, cell, event) {
console.log(row, column, cell, event)
event.target.innerHTML = ''
let cellInput = document.createElement('input')
cellInput.value = ''
cellInput.setAttribute('type', 'text')
cellInput.style.width = '80%'
cell.appendChild(cellInput)
cellInput.onblur = function () {
cell.removeChild(cellInput)
event.target.innerHTML = cellInput.value
}
好了,我也就讲这么多 ,知识有点多 ,但基本都是零零碎碎我百度总结,然后再测试写出来的,因为我现在写的VUE的ERP系统。
加油,近些天我会慢慢越写越多的
元宵快乐啊大家!哦不对,写完这篇博客已经2019-2-20-0:26了,那就祝大家晚安好梦,夜梦吉祥哈!
(实习近两个月,学的还是挺多的,加油加油加加油!)
vue的表单编辑删除,保存取消功能的更多相关文章
- 12.Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...
- 不让input表单的输入框保存用户输入的历史记录
如何不让input表单的输入框保存用户输入的历史记录. 有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...
- Vue.js表单校验;动画指令;避免内存泄露。
Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...
- jqgrid 实现行编辑,表单编辑的列联动
这个问题的场景相信大家都遇到过,比方有A,B,C三列,B,C列均为下拉框.可是C列的值是由B列的值来决定的.即C列中的值是动态变化的,变化的根据就是B列中你选择的值. 本文给出的是一个有用,简易快捷的 ...
- RookeyFrame Bug 表单管理 -> 查看表单 ->编辑字段页面 JS报错
表单管理 -> 查看表单 ->编辑字段页面 小bug onchange里面直接就是方法,修改:去掉外面的function(){},直接把方法体写在onchange里面就可以了. 后台方法: ...
- BPM系统,工作流引擎,表单引擎常用30个功能与常见问题
1.1:支持国际化 如果使用工具包的模式开发,支持国际化的工作由自己完成的. 如果使用Ccbpm 的前端,主要的功能页面已经支持, 后台的设置的页面全部中文,没有做支持国际化. 1.2:能单独部署,微 ...
- Servlet的5种方式实现表单提交(注册小功能)
Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据 用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> ...
- 【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- vue + vuex 表单处理
使用场景:在一个表单中,各项数据提交后需要重置表单中各<input>元素的值为空. 组件中关联: <template> <el-form ref="form&q ...
随机推荐
- video 属性和事件用法大全
1.video 属性 <!-- video 不支持 IE8及以下版本浏览器,支持三种视频格式:MP4,WebM 和 Ogg --> <video src="test.mp4 ...
- Android中一个经典理解误区的剖析
今天,在Q群中有网友(@广州-包晴天)发出了网上的一个相对经典的问题,问题具体见下图. 本来是无意写此文的,但群里多个网友热情不好推却,于是,撰此文予以分析. 从这个问题的陈述中,我们发现,提问者明显 ...
- Android之Material Dialogs详解
文章大纲 一.什么是Material Dialogs二.Material Dialogs实战三.项目源码下载 一.什么是Material Dialogs Material Dialogs是一个 ...
- MPP-使用说明
1.介绍 MPP是瑞芯微提供的媒体处理软件平台,适用于瑞芯微芯片系列.它屏蔽了有关芯片的复杂底层处理,屏蔽了不同芯片的差异,为使用者提供了统一的视频媒体统一接口. 具体提供的功能: 视频编码:H264 ...
- pod command
pod 基础使用命令 创建Podfile文件 1 pod init 使用命令打开Podfile文件 1 open -a Xcode Podfile 搜索pod 库 1 pod search 库名 更新 ...
- 安装windows 10到固态硬盘实践记录
1.前提 由于之前一直用的机械硬盘,电脑用了几年是越来越慢,所以打算买个SSD,装个新系统,其他的机械硬盘都当从盘用 2.准备工作 SSD :256G 3星的 WIN10正版光盘一张 外置光驱一个 3 ...
- LeetCode算法题-Toeplitz Matrix(Java实现)
这是悦乐书的第312次更新,第333篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第181题(顺位题号是766).如果从左上角到右下角的每个对角线具有相同的元素,则矩阵是 ...
- C 实现自己构建的数组
#include<stdio.h>#include<malloc.h>#include<stdlib.h>#include<stdbool.h>stru ...
- Java遍历Map的4种方式
public static void main(String[] args) { // 循环遍历Map的4中方法 Map<Integer, Integer> map = new HashM ...
- Mysql监控工具介绍-Monyog
MONyog监控工具 MONyog是一个优秀的MySQL监控工具,可以实时监测MYSQL服务器,查看MySQL服务器的运行状态. 支持查询分析功能,能够轻松找出有MySQL的问题所在,此外,还可以帮助 ...