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 axios 批量删除 数组参数


下一篇:Vue小案例 之 商品管理------批量删除与商品数量的调整