ElementUI 添加与修改使用同一个对话框的实现方式

Posted 2023-01-24 Tang.Mr

前言

近期使用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("向服务器发送修改的请求！");
                

如此添加数据和修改数据时便使用了同一个对话框