过年回来第一篇博客，可能说的不是很清楚，而且心情可能也不是特别的high，虽然今天是元宵，我还在办公室11.30在加班，但就是想把写过的代码记下来，怕以后可能真的忘了。（心将塞未塞，欲塞未满）
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了，那就祝大家晚安好梦，夜梦吉祥哈！
（实习近两个月，学的还是挺多的，加油加油加加油！）
如对本文有疑问， 点击进行留言回复！！
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json？Protocol Buffer？FlatBuffers？
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论