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 function调用时的参数检测常用办法
Feb 26 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
Servlet返回的数据js解析2种方法
Dec 12 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写聊天室(九)
2006/10/09 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
php数组合并的二种方法
2014/03/21 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python探索之自定义实现线程池
2017/10/27 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
合作协议书格式
2014/08/19 职场文书
房屋出租委托书格式
2014/09/23 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
党的作风建设心得体会
2014/10/22 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle