element-ui中select组件绑定值改变,触发change事件方法


Posted in Javascript onAugust 24, 2018

1.安装vuecli脚手架

2.终端输入

cnpm i element-ui -S

安装element-ui

3.按需引入select组件

在main.js中写入如下代码

/* 导入第三方库开始 */
import 'element-ui/lib/theme-chalk/index.css';
// 按需加载Select组件
import {Select,Option,Dialog,Button} from 'element-ui'
Vue.use(Select)
Vue.use(Option)
Vue.use(Dialog)
Vue.use(Button)
// Vue.component(Select.name,Select);
// 或写为Vue.use(Button)
/* 导入第三方库结束 */

HelloWorld.vue代码

<template>
<div>
  <el-dialog
   title="提示"
   :visible.sync="dialogVisible"
   width="30%">
   <span>{{selVal}}</span>
   <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
   </span>
  </el-dialog>

   <el-select v-model="value" multiple placeholder="请选择" @change="currentSel">
    <el-option
     v-for="item in options"
     :key="item.value"
     :label="item.label"
     :value="item.label">
    </el-option>
   </el-select>
</div>
</template>

<script>
 export default {
  data() {
   return {
    options: [{
     value: '选项1',
     label: '黄金糕'
    }, {
     value: '选项2',
     label: '双皮奶'
    }, {
     value: '选项3',
     label: '蚵仔煎'
    }, {
     value: '选项4',
     label: '龙须面'
    }, {
     value: '选项5',
     label: '北京烤鸭'
    }],
    value: '',
    dialogVisible: false,
    selVal : ''
   }
  },
  methods: {
   currentSel(selVal){
    this.selVal = selVal;
    this.dialogVisible = true;
   }
  }
 }
</script>

element-ui中select组件绑定值改变,触发change事件方法

element-ui中select组件绑定值改变,触发change事件方法

拓展知识:element-ui 点击编辑弹出dialog组件中select组件绑定值改变,但是不触发change事件的方法

代码结构如下:

element-ui中select组件绑定值改变,触发change事件方法

element-ui中select组件绑定值改变,触发change事件方法

现象视频如下:

element-ui中select组件绑定值改变,触发change事件方法

现象原因:经过排查发现 此时点击操作不触发chang事件,后台响应数据中没有订单取消原因orderCanleRemark字段,此时导致不触发change事件,

解决方案:

方案1:让后台配合响应该字段,无论是否为空都响应该字段

方案2:在后台响应数据赋值给,this.form之前,手动添加该字段到后台响应数据中

代码如下:

element-ui中select组件绑定值改变,触发change事件方法

以上这篇element-ui中select组件绑定值改变,触发change事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
js动态创建标签示例代码
Jun 09 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 #Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 #Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 #Javascript
微信小程序支付PHP代码
Aug 23 #Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 #Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 #Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 #Javascript
You might like
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php简单判断文本编码的方法
2015/07/30 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
RC4文件加密的python实现方法
2015/06/30 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
django 信号调度机制详解
2019/07/19 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python range实例用法分享
2020/02/06 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
银行见习期自我鉴定
2014/01/29 职场文书
英文感谢信格式
2015/01/21 职场文书
清洁工个人工作总结
2015/03/05 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书