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

2024-10-28 14:47:53

1.需求描述

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

2.功能实现

1.创建按钮

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

    <el-row>
        <el-button type="primary" plain>新增</el-button>
    </el-row>

2.创建对话框

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

3.对话框与按钮的绑定

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

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

@click="dialogVisible = true"

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

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

3.对话框表单的改造

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

先把以下代码段删掉：

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

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

对以下代码进行修改：

修改成：

            <el-form-item>
                <el-button type="primary" @click="addBrand">立即创建</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>

            <!--新增按钮提交-->
            addBrand() {
                console.log(this.addForm);
            }

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

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

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

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

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

5.完整代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
    </style>

</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--第二行的按钮-->
    <el-row>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain  @click="dialogVisible = true">新增</el-button>
    </el-row>
    <!--点击新增按钮就弹出对话框-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
            >

        <!--弹出的对话框的内容-->
        <el-form ref="form" :model="addForm" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="addForm.brandName"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="addForm.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="addForm.ordered"></el-input>
            </el-form-item>
            <el-form-item label="活动形式">
                <el-input type="textarea" v-model="addForm.description"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="addForm.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">立即创建</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    align="center"
                    label="品牌名称"
                    >
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    align="center"
                    label="企业姓名"
                    >
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>
            </el-table-column>
        </el-table>
    </template>

</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app",
        methods: {
            tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
            return 'warning-row';
            } else if (rowIndex === 3) {
             return 'success-row';
            }
            return '';
            },

            //复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },

             <!--查询按钮提交-->
              onSubmit() {
                console.log(this.brand);
              },

              <!--新增按钮提交-->
              addBrand() {
                console.log(this.addForm);
              }

    },
    data() {
      return {

      <!--弹出的对话框的内容-->
      addForm: {
          brandName:'',
          companyName:'',
          id:'',
          ordered:'',
          description:'',
          status:'',
      },

        dialogVisible: false,

         multipleSelection: [],

        tableData: [{
          brandName: '小米',
          companyName: '小米科技有限公司',
          ordered: '100',
          status:'1',
        }, {
          brandName: '小米',
          companyName: '小米科技有限公司',
          ordered: '100',
          status:'1',
        }, {
          brandName: '小米',
          companyName: '小米科技有限公司',
          ordered: '100',
          status:'1',
        }, {
          brandName: '小米',
          companyName: '小米科技有限公司',
          ordered: '100',
          status:'1',
        }],

        <!--搜索表单-->
        brand: {
          status: '',
          companyName: '',
          brandName: '',
        }

      }
    }
    })

</script>

</body>
</html>

总结

到此这篇关于Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框的文章就介绍到这了,更多相关Vue element-ui点击按钮弹出dialog内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

elementUI同一页面展示多个Dialog的实现

要实现的效果如下: 首先官方文档是这样描述的: 但是我写了个小demo发现并不能直接平级放置即可,一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog. 原因如下:因为dialog先后顺序不同z-index设置的层级不同,所以必定会覆盖遮挡那么我们要实现一个这样的效果不仅仅平级放置即可,就要用到里面的一个属性:modal 下面贴上代码: 总的思路就是:dialog先后顺序重叠问题,使用便宜去让它们错开:然后就是遮罩层导致不能点击z-index层级低的弹框,就要用到moda
详解如何在vue+element-ui的项目中封装dialog组件

1.问题起源由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l
Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

目录 1.需求描述 2.功能实现 1.创建按钮 2.创建对话框 3.对话框与按钮的绑定 3.对话框表单的改造 4.对“状态”Switch开关所提交的类型进行修改 5.完整代码总结 1.需求描述想要实现点击一个按钮就弹出一个对话框,在对话框中可输入数据进行提交,在点击取消时对话框关闭 2.功能实现 1.创建按钮在element中把找到按钮的代码放到div里 <el-row> <el-button type="primary" plain>新增</el-
vue中使用element ui的弹窗与echarts之间的问题详解

今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就陷入疑惑,平时都是这样获取的,怎么今天就不行了呢,搜索了很多答案之后才知道,在刚进入页面的时候抽屉是关闭的,那echarts不进行获取dom,当点击抽屉出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-drawer title="分析图表"
Vue前端整合Element Ui的教程详解

目录 Vue前端整合Element Ui 1.安装Element Ui组件库 2.测试Element Ui是否整合成功 Vue前端整合Element Ui 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型. Element Ui组件官网 1.安装Element Ui组件库 WIN+
vue中使用element日历组件的示例代码

先看下效果图: 完整代码附上 <template> <div class="newSeeds" id="famerCalendar"> <div class="title-bottom"> <el-date-picker :clearable="false" prefix-icon="timeFilter" v-model="value2" ty
vue3.0中使用element UI表单遍历校验问题解决

问题在使用vue3.0写项目的时候遇到一个需要遍历的表单,可以增加删除表单对象不考虑校验问题的话,就是简单的数组包form对象.涉及校验的时候,按照以往的写法就是绑定ref值,然后调用组件的validate方法[form表单中配置rule规则]. 解决方法就是将数组内嵌在一个对象中,对象的结构跟我们定义的form对象结构一致 //我们需要遍历的form对象数组 const arr = [ { name:'', sex:'', age:'', },{ name:'', sex:'', age:
vue中使用element组件时事件想要传递其他参数的问题

在使用element的上传组件时在一下几个钩子中传递其他参数图中是文件上传时的几个钩子,参数为文件或文件列表或者其他参数,但是现在我想在原有参数上传递其他参数.比如我想在on-success的钩子中传递一个自定义参数i,原本是这样写的: :on-success="handleSuccess(i)" //handleSuccess是一个方法但是发现这样写取不到自身原来的参数,后来在网上找到了一个比较好的方法,如下: :on-success="(value)=> han
Vue中Class和Style实现v-bind绑定的几种用法

项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了导航之外其他很多地方也都会用到这种方式处理选中与未选中. 除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除,利用 css() 方法设置/获取元素的内联样式. 那么在 vue 中我们如何处理这类的效果呢?
vue实现点击出现操作弹出框的示例

如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里插入任何元素,这个弹框显示时根据我鼠标的点击位置,定位弹窗的位置,并在组件里面监听鼠标抬起事件,触发事件时将弹窗隐藏: 接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中: 本次实现基于vuecli3 接下来,具体实现: 首先,我们先写一个demo组
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法

1.先使用Qt designer设计两个窗口,一个是主窗口,一个是子窗口其中主窗口是新建-Main Window,子窗口是Dialog窗体. 两个窗口不能是同一类型,否则会崩溃. 并保存为EyeTracking_main.ui和EyeTracking_process.ui(因为我在做眼动追踪,因此窗体命名与此相关,后同),使用UIC工具转成.py文件. 2.写一个驱动函数调用两个窗体主窗体Eyetracking_main.py from PyQt5 import QtCore, QtGu
详解Android 8.1.0 Service 中弹出 Dialog的方法

场景:在Service 中开启线程下载升级包,当下载完系统升级包,弹出一个Dialog 提示用户. 注意,Android 系统版本不一样,可能会有不一样的表现.当前是基于 Android 8.1.0 的 Service 中弹 Dialog. 首先,就是要在功能清单列表中声明权限,以下两个都必须声明: <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/><!--这行代码必须存在,