vue的表單編輯删除，儲存取消功能

vue+elementui的編輯，删除，儲存，取消

過年回來第一篇部落格，可能說的不是很清楚，而且心情可能也不是特别的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了，那就祝大家晚安好夢，夜夢吉祥哈！

（實**兩個月，學的還是挺多的，加油加油加加油！）