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 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
React四级菜单的实现
Apr 08 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连接access数据库
2008/03/27 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
PHP生成唯一订单号
2015/07/05 PHP
开启PHP的伪静态模式
2015/12/31 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python 实现数组相减示例
2019/12/27 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
应届生妇产科护士求职信
2013/10/27 职场文书
职业规划书如何设计?
2014/01/09 职场文书
关于人生的感言
2014/01/17 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
2014年药店工作总结
2014/11/20 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
详解MySQL的半同步
2021/04/22 MySQL
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang