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 Flash插入函数免激活代码
Mar 31 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
Script的加载方法小结
Jan 12 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
详解webpack babel的配置
Jan 09 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
Bootstrap基础学习
2015/06/16 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
Vue-Router模式和钩子的用法
2018/02/28 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python字典键值对的添加和遍历方法
2016/09/11 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
keras topN显示,自编写代码案例
2020/07/03 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
学生打架检讨书大全
2014/01/23 职场文书
校庆筹备方案
2014/03/30 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
影子教师研修方案
2014/06/14 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
读后感作文评语
2014/12/25 职场文书
狮子林导游词
2015/02/03 职场文书
2015年行政部工作总结
2015/04/28 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书