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>

     

     <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>

     

  </div>

</template>

<script>

export default {

  data() {

    return {

      standard: {},

      dialogFormVisible: false,

      titleMap: {

        addData: "添加数据",

        updataData: "修改数据",

      },

      dialogTitle:""

    };

  },

methods: {

    //修改

     Theeditor() {

      this.dialogFormVisible = true;

      this.dialogTitle = "updataData";

    },

    //添加

    addData() {

      this.dialogFormVisible = true;

      this.dialogTitle = "addData";

    },

    //提交

     async submit() {

      this.dialogFormVisible = false;

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

        alert("向服务器发送添加的请求！");

      } else {

        alert( "向服务器发送修改的请求！" );

      }

    },

  },

};

</script>

来源：oschina

链接：https://my.oschina.net/u/4424718/blog/4486335

标签

Vue.js

element

axios