过年回来第一篇博客, 可能说的不是很清楚, 而且心情可能也不是特别的 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 了, 那就祝大家晚安好梦, 夜梦吉祥哈!
(实习近两个月, 学的还是挺多的, 加油加油加加油!)
来源: https://www.cnblogs.com/qq946487854/p/10404268.html