devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue中使用element-ui 给按钮绑定一个单击事件，实现点击按钮就弹出一个dialog对话框_vue点击按钮弹出表单

作者：繁依Fanyi0 | 2024-02-18 07:51:59

赞

踩

vue点击按钮弹出表单

1.需求描述

想要实现点击一个按钮就弹出一个对话框，在对话框中可输入数据进行提交，在点击取消时对话框关闭

2.功能实现

1.创建按钮

在element中把找到按钮的代码放到div里

  1.     <el-row>
  2.         <el-button type="primary" plain>新增</el-button>
  3.     </el-row>

2.创建对话框

在element中找到dialog对话框对应的代码，把代码粘贴到对应的位置

3.对话框与按钮的绑定

通过给按钮添加与对话框相关联的绑定事件，来实现点击按钮即可弹出对话框

把上图第一行点击打开中的

@click="dialogVisible = true"

 放到按钮组件代码块儿里，即创建按钮的代码变成：

  1. <el-row>
  2.         <el-button type="primary" plain  @click="dialogVisible = true">新增</el-button>
  3.     </el-row>

3.对话框表单的改造

对对话框里的内容进行修改，搞成我们想要的样子

先把以下代码段删掉：

 然后去element中找到对应表单的代码贴进去，并对表单代码中data()里的return方法进行修改（改名、改成员变量），再对<el-form-item>的:model与v-model的名称进行修改（名称要与刚刚修改的return里的那个方法一致）

 

4.点击“立即创建”实现表单的提交与点击取消对话框消失

对以下代码进行修改 ：

 

修改成：

  1.             <el-form-item>
  2.                 <el-button type="primary" @click="addBrand">立即创建</el-button>
  3.                 <el-button @click="dialogVisible = false">取消</el-button>
  4.             </el-form-item>
  5.  
  6.  
  7.             <!--新增按钮提交-->
  8.             addBrand() {
  9.                 console.log(this.addForm);
  10.             }

 4.对“状态”Switch开关所提交的类型进行修改

在上述工作做完后，表单已经能实现完整功能的表单的提交与取消后对话框消失的功能了，但此时Switch开关提交的类型为ture，若我不想要ture，我想要0或者1，就要对Switch“状态”的代码块儿进行修改

在element下Switch开关中找到扩展的 value 类型，可以看到有active-value="100" 和inactive-value="0"的代码，可以把这两行代码加入我们的Switch“状态”的代码块儿中并对数值进行修改

修改完之后，此时Switch“状态”的代码为：

  1.             <el-form-item label="状态">
  2.                 <el-switch v-model="addForm.status"
  3.                            active-value="1"
  4.                            inactive-value="0"
  5.                 ></el-switch>
  6.             </el-form-item>

5.完整代码

这样我们就能实现实现点击一个按钮就弹出一个对话框，在对话框中可输入数据进行提交，在点击取消时对话框关闭的功能啦

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <style>
  8.   .el-table .warning-row {
  9.     background: oldlace;
  10.   }
  11.  
  12.   .el-table .success-row {
  13.     background: #f0f9eb;
  14.   }
  15.     </style>
  16.  
  17. </head>
  18. <body>
  19. <div id="app">
  20.  
  21.     <!--搜索表单-->
  22.     <el-form :inline="true" :model="brand" class="demo-form-inline">
  23.         <el-form-item label="当前状态">
  24.             <el-select v-model="brand.status" placeholder="当前状态">
  25.                 <el-option label="启用" value="1"></el-option>
  26.                 <el-option label="禁用" value="0"></el-option>
  27.             </el-select>
  28.         </el-form-item>
  29.         <el-form-item label="企业名称">
  30.             <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
  31.         </el-form-item>
  32.         <el-form-item label="品牌名称">
  33.             <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
  34.         </el-form-item>
  35.  
  36.         <el-form-item>
  37.             <el-button type="primary" @click="onSubmit">查询</el-button>
  38.         </el-form-item>
  39.     </el-form>
  40.  
  41.  
  42.     <!--第二行的按钮-->
  43.     <el-row>
  44.         <el-button type="danger" plain>批量删除</el-button>
  45.         <el-button type="primary" plain  @click="dialogVisible = true">新增</el-button>
  46.     </el-row>
  47.     <!--点击新增按钮就弹出对话框-->
  48.     <el-dialog
  49.             title="编辑品牌"
  50.             :visible.sync="dialogVisible"
  51.             width="30%"
  52.             >
  53.  
  54.         <!--弹出的对话框的内容-->
  55.         <el-form ref="form" :model="addForm" label-width="80px">
  56.             <el-form-item label="品牌名称">
  57.                 <el-input v-model="addForm.brandName"></el-input>
  58.             </el-form-item>
  59.             <el-form-item label="企业名称">
  60.                 <el-input v-model="addForm.companyName"></el-input>
  61.             </el-form-item>
  62.             <el-form-item label="排序">
  63.                 <el-input v-model="addForm.ordered"></el-input>
  64.             </el-form-item>
  65.             <el-form-item label="活动形式">
  66.                 <el-input type="textarea" v-model="addForm.description"></el-input>
  67.             </el-form-item>
  68.             <el-form-item label="状态">
  69.                 <el-switch v-model="addForm.status"
  70.                            active-value="1"
  71.                            inactive-value="0"
  72.                 ></el-switch>
  73.             </el-form-item>
  74.             <el-form-item>
  75.                 <el-button type="primary" @click="addBrand">立即创建</el-button>
  76.                 <el-button @click="dialogVisible = false">取消</el-button>
  77.             </el-form-item>
  78.         </el-form>
  79.     </el-dialog>
  80.  
  81.  
  82.     <!--表格-->
  83.     <template>
  84.         <el-table
  85.                 :data="tableData"
  86.                 style="width: 100%"
  87.                 :row-class-name="tableRowClassName"
  88.                 @selection-change="handleSelectionChange"
  89.         >
  90.             <el-table-column
  91.                     type="selection"
  92.                     width="55">
  93.             </el-table-column>
  94.             <el-table-column
  95.                     type="index"
  96.                     width="50">
  97.             </el-table-column>
  98.             <el-table-column
  99.                     prop="brandName"
  100.                     align="center"
  101.                     label="品牌名称"
  102.                     >
  103.             </el-table-column>
  104.             <el-table-column
  105.                     prop="companyName"
  106.                     align="center"
  107.                     label="企业姓名"
  108.                     >
  109.             </el-table-column>
  110.             <el-table-column
  111.                     prop="ordered"
  112.                     align="center"
  113.                     label="排序">
  114.             </el-table-column>
  115.             <el-table-column
  116.                     prop="status"
  117.                     align="center"
  118.                     label="当前状态">
  119.             </el-table-column>
  120.             <el-table-column
  121.                     align="center"
  122.                     label="操作">
  123.                 <el-row>
  124.                     <el-button type="primary">修改</el-button>
  125.                     <el-button type="danger">删除</el-button>
  126.                 </el-row>
  127.             </el-table-column>
  128.         </el-table>
  129.     </template>
  130.  
  131.  
  132. </div>
  133.  
  134.  
  135. <script src="js/vue.js"></script>
  136. <script src="element-ui/lib/index.js"></script>
  137. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  138.  
  139. <script>
  140.     new Vue({
  141.         el: "#app",
  142.         methods: {
  143.             tableRowClassName({row, rowIndex}) {
  144.             if (rowIndex === 1) {
  145.             return 'warning-row';
  146.             } else if (rowIndex === 3) {
  147.              return 'success-row';
  148.             }
  149.             return '';
  150.             },
  151.  
  152.             //复选框选中后执行的方法
  153.             handleSelectionChange(val) {
  154.                 this.multipleSelection = val;
  155.                 console.log(this.multipleSelection)
  156.             },
  157.  
  158.  
  159.              <!--查询按钮提交-->
  160.               onSubmit() {
  161.                 console.log(this.brand);
  162.               },
  163.  
  164.               <!--新增按钮提交-->
  165.               addBrand() {
  166.                 console.log(this.addForm);
  167.               }
  168.  
  169.     },
  170.     data() {
  171.       return {
  172.  
  173.       <!--弹出的对话框的内容-->
  174.       addForm: {
  175.           brandName:'',
  176.           companyName:'',
  177.           id:'',
  178.           ordered:'',
  179.           description:'',
  180.           status:'',
  181.       },
  182.  
  183.         dialogVisible: false,
  184.  
  185.          multipleSelection: [],
  186.  
  187.         tableData: [{
  188.           brandName: '小米',
  189.           companyName: '小米科技有限公司',
  190.           ordered: '100',
  191.           status:'1',
  192.         }, {
  193.           brandName: '小米',
  194.           companyName: '小米科技有限公司',
  195.           ordered: '100',
  196.           status:'1',
  197.         }, {
  198.           brandName: '小米',
  199.           companyName: '小米科技有限公司',
  200.           ordered: '100',
  201.           status:'1',
  202.         }, {
  203.           brandName: '小米',
  204.           companyName: '小米科技有限公司',
  205.           ordered: '100',
  206.           status:'1',
  207.         }],
  208.  
  209.  
  210.         <!--搜索表单-->
  211.         brand: {
  212.           status: '',
  213.           companyName: '',
  214.           brandName: '',
  215.         }
  216.  
  217.       }
  218.     }
  219.     })
  220.  
  221. </script>
  222.  
  223. </body>
  224. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/106260
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号