Vue+Element-ui弹窗 this.$alert is not a function问题

目录
  • Vue Element-ui弹窗 this.$alert is not a function
    • 使用问题
    • 解决办法
  • Vue element-ui 弹窗使用遇到的问题
    • 解决代码如下

Vue Element-ui弹窗 this.$alert is not a function

使用问题

Element-ui官网上单独引用MessageBox的话需要在import中加入MessageBox。

但是在使用时报了this.$alert is not a function

解决办法

在element.js中加入Vue.prototype.$XXX = MessageBox

在使用时用this. $XXX.alert

Vue element-ui 弹窗使用遇到的问题

弹窗里定义了表单使用遇到关闭弹窗再次开启时会自动保存上一次的数据而不是重置初始数据的问题

解决代码如下

<template>
    <el-form-item label>
        <el-button :loading="state" type="primary" @click="onSubmit('ruleForm')">保存</el-button>
        <el-button @click="handleClose('ruleForm')">取消</el-button>
    </el-form-item>
</template>
 
 
<script>
export default {
    methods:{        
        handleClose(formName) {
            this.$refs[formName].resetFields();  //这句代码重置弹窗里定义的表单数据
        }
    }
}
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue基于Element-ui实现表格弹窗组件

    Vue基于Element-ui实现表格弹窗组件

    本文实例为大家分享了Vue基于Element-ui实现表格弹窗组件的具体代码,供大家参考,具体内容如下 效果图 使用方式 acTable1 () {   this.$modalTable({     title: "表格一",     tableData: [{       date: '2016-05-02',       name: '王小虎',       address: '上海市普陀区金沙江路 1518 弄'     }, {       date: '2016-05-04'

  • vue+elementui通用弹窗的实现(新增+编辑)

    vue+elementui通用弹窗的实现(新增+编辑)

    本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑),分享给大家,具体如下: 组件模板 <el-dialog :title="title" :visible.sync="dialogShow" :close-on-click-modal="false"> <div class="ym-common-dialog" :class="customClass"> <d

  • Vue+Element UI实现概要小弹窗的全过程

    Vue+Element UI实现概要小弹窗的全过程

    场景:一个巡检单据有n个巡检明细,一个巡检明细有n个巡检项目. 实现效果:当鼠标移到明细行的概要图标时显示当前行的巡检项目卡片弹窗,移出弹窗时关闭弹窗 巡检单据详情 鼠标移到项目概要图标 效果实现 data里面声明的变量 // 概要弹窗 outlineDialog: false, // 当前行标准概要 standSummary: [], // 概要弹窗位置控制 outlineCard: { pageY: null, pageX: null, display: "none" } 1.弹窗

  • Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • Vue+Element-ui弹窗 this.$alert is not a function问题

    Vue+Element-ui弹窗 this.$alert is not a function问题

    目录 Vue Element-ui弹窗 this.$alert is not a function 使用问题 解决办法 Vue element-ui 弹窗使用遇到的问题 解决代码如下 Vue Element-ui弹窗 this.$alert is not a function 使用问题 Element-ui官网上单独引用MessageBox的话需要在import中加入MessageBox. 但是在使用时报了this.$alert is not a function 解决办法 在element.j

  • Vue + Element UI图片上传控件使用详解

    Vue + Element UI图片上传控件使用详解

    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

  • Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil

  • 在vue+element ui框架里实现lodash的debounce防抖

    事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串.但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce 在解决这个问题时,我遇到的坎儿主要有以下: 我首先在项目里用npm安装lodash,先全局安装,然后安装到项目 npm install -g lodash npm install --save lodash 安装后,我就在我要用防抖的组件里,引入lo

  • 解决Vue+Element ui开发中碰到的IE问题

    IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill

  • Vue+Element UI+Lumen实现通用表格分页功能

    前言 最近在做一个前后端分离的项目,前端使用 Vue+ Element UI,而后端则使用 Lumen 做接口开发,其中分页是必不可少的一部分,本文就介绍如何基于以上环境做一个简单.可复用的分页功能. 先说后端 后端做的事情不多,只需要接受几个参数,根据参数来获取数据即可. 需要获取的参数如下: pageSize(一页数据的数量) pageIndex(第几页的数据) 然后就可以根据这两个参数计算出偏移量,再从数据库中取出相应的数据. 假如现在给出的参数为:pageSize=10,pageInde

  • 解决vue+ element ui 表单验证有值但验证失败问题

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template

  • vue element ui validate 主动触发错误提示操作

    elementUI使用了async-validator进行表单验证,但是当我使用下拉树(el-cascader)时,发现其不主动触发,于是我只能主动去触发,方法如下: this.$refs['form'].fields[0].validateMessage = 'error message' this.$refs['form'].fields[0].validateState = 'error' 补充知识:element-ui 打开页面触发校验问题 如果你设置了关闭弹出页就resetFields

随机推荐