vue的表单编辑删除，保存取消功能

2019-02-20 00:44:49来源：博客园阅读 ()

过年回来第一篇博客，可能说的不是很清楚，而且心情可能也不是特别的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
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有