element-ui -vue 添加和修改使用一個對話框

實現 

步驟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屬性的值，能夠對話框標題的切換
主要：添加和修改用的是同一個對象接收添加或者修改的參數的，因此在添加時須要對接收數據的對象進行初始化（修改不須要）

    //修改

    Theeditor() {

      this.dialogFormVisible = true;

      this.dialogTitle =  "updataData" ; 

    },

    //添加

    addData() {

      this.dialogFormVisible = true;

      this.dialogTitle =  "addData" ;

    },

步驟3.

添加和修改用的是同一個提交按鈕，在提交的方法中須要對dialogTitle屬性的值進行判斷（判斷的數據即是添加和修改方法被點擊後賦的值），若是是添加對應的值，經過axios向服務器端發送post請求，不然便向服務器發送put請求

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

• 數據和修改數據時便使用了同一個對話框

 

<template>

  <div>

    <el-form label-width="80px">

      <el-button type="primary"  @click="Theeditor()" >編輯</el-button>

      <el-button type="primary"  @click="addData()" >添加</el-button>

    </el-form>

     <!-- 對話框 start -->

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

      <el-form :model="standard" label-width="100px">

        <el-form-item label="標準名稱">

          <el-input v-model="standard.name" style="width:300px"></el-input>

        </el-form-item>

        <el-form-item label="最小重量">

          <el-input v-model="standard.minWeight" style="width:300px"></el-input>

        </el-form-item>

        <el-form-item label="最大重量">

          <el-input v-model="standard.maxWeight" style="width:300px"></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>

     <!-- 對話框 end -->

  </div>

</template>

<script>

export default {

  data() {

    return  {

      standard: {},

      dialogFormVisible: false,

      titleMap: {

        addData: "添加數據",

        updataData: "修改數據",

      },

      dialogTitle:""

    };

  },

    methods:   {

    //修改

     Theeditor()   {

      this.dialogFormVisible = true;

      this.dialogTitle = "updataData"; 

    },

    //添加

    addData()  {

  //修改和添加都用同一個對象,通過修改後,再添加一條數據,會存在修改後數據,因此要把  standard 對象 設置空.

      this.standard={};

      this.dialogFormVisible = true;

      this.dialogTitle = "addData";

    },

    //提交

     async submit()  {

      this.dialogFormVisible = false;

      if (this.dialogTitle ==  "addData" ) {

        alert("向服務器發送添加的請求！");

      } else {

        alert( "向服務器發送修改的請求！" );

      }

    },

  },

};

</script>