ElementUI 添加與修改使用同一個對話框的實現方式

前言

近期使用axois與ElementUI對錶數據進行CRUD操作，在實現功能的過程中發現添加和修改的時候使用兩個對話框比較的繁瑣，所以我通過查閱相關資料，對此進行一波優化，具體內容如下：

頁面組件中的代碼，此代碼可直接拷貝到App.vue中運行，查看效果

<template>
  <div>
    <!--添加按鈕-->
    <el-button type="primary" @click="addData">添加商品</el-button>
    <!--表格-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
      <el-table-column
              fixed
              prop="date"
              label="日期"
              width="150">
      </el-table-column>
      <el-table-column
              prop="name"
              label="姓名"
              width="120">
      </el-table-column>
      <el-table-column
              prop="province"
              label="省份"
              width="120">
      </el-table-column>
      <el-table-column
              prop="city"
              label="市區"
              width="120">
      </el-table-column>
      <el-table-column
              prop="address"
              label="地址"
              width="300">
      </el-table-column>
      <el-table-column
              prop="zip"
              label="郵編"
              width="120">
      </el-table-column>
      <el-table-column
              fixed="right"
              label="操作"
              width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="updateData(scope.row)">編輯</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--對話框-->
    <el-dialog :title="titleMap[dialogTitle]" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-date-picker
                  v-model="form.date"
                  type="date"
                  value-format="yyyy-MM-dd"        
                  placeholder="選擇日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="省份" :label-width="formLabelWidth">
          <el-input v-model="form.province" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="市區" :label-width="formLabelWidth">
          <el-input v-model="form.city" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="郵編" :label-width="formLabelWidth">
          <el-input v-model="form.zip" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">確 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
    export default {
        data(){
            return{
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀區',
                    address: '上海市普陀區金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀區',
                    address: '上海市普陀區金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀區',
                    address: '上海市普陀區金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀區',
                    address: '上海市普陀區金沙江路 1516 弄',
                    zip: 200333
                }],
                titleMap : {
                    addData : "添加數據",
                    updateData : "修改數據"
                },
                dialogTitle : "",
                dialogFormVisible : false,
                formLabelWidth : '120px',
                form : {},
            }
        },
        methods : {
            addData(){
                this.form = {};
                this.dialogFormVisible = true;
                this.dialogTitle = "addData";
            },
            updateData(row){
                this.dialogFormVisible = true;
                this.dialogTitle = "updateData";
                this.form = row;
            },
            submit(){
                this.dialogFormVisible = false;
                if (this.dialogTitle == "addData") {
                    console.log(this.form);
                    alert("向服務器發送添加的請求！");
                } else {
                    console.log(this.form);
                    alert("向服務器發送修改的請求！");
                }
            }
        }
    }
</script>

實現：

步驟1.

首先在data中定義一個titleMap對象，和一個dialogTitle屬性，titleMap和dialogTitle關係相>當於一個鍵值對匹配一樣（通過dialogTitle匹配titleMap中的值）
titleMap對象中有兩個屬性，兩個屬性都有對應的屬性值，分別表示點擊方法彈出對話框的標題信息

 				titleMap : {
                    addData : "添加數據",
                    updateData : "修改數據"
                },
               dialogTitle : "" 

步驟2.

通過雙向數據綁定將titleMap對象，和dialogTitle屬性綁定在組件上

<el-dialog :title="titleMap[dialogTitle]" :visible.sync="dialogFormVisible">

步驟3.

通過點擊事件（添加或修改）去改變dialogTitle屬性的值，從而達到對話框標題的切換
主要：添加和修改用的是同一個對象接收添加或者修改的參數的，所以在添加時需要對接收數據的對象進行初始化（修改不需要）

			//添加的方法
 			addData(){
                this.form = {};
                this.dialogFormVisible = true;
                this.dialogTitle = "addData";
            },
            //修改的方法
            updateData(row){
                this.dialogFormVisible = true;
                this.dialogTitle = "updateData";
                this.form = row;
            }

最後：

添加和修改用的是同一個提交按鈕，在提交的方法中需要對dialogTitle屬性的值進行判斷（判斷的數據便是添加和修改方法被點擊後賦的值），如果是添加對應的值，通過axios向服務器端發送post請求，否則便向服務器發送put請求（我的代碼是簡單演示）

	//提交的方法
		submit(){
                this.dialogFormVisible = false;
                if (this.dialogTitle == "addData") {
                    console.log(this.form);
                    alert("向服務器發送添加的請求！");
                } else {
                    console.log(this.form);
                    alert("向服務器發送修改的請求！");
                }

如此添加數據和修改數據時便使用了同一個對話框