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了,那就祝大家晚安好梦,夜梦吉祥哈!
(实习近两个月,学的还是挺多的,加油加油加加油!)