element-ui中select组件绑定值改变,触发change事件方法
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
1.安装vuecli脚手架
2.终端输入
安装element-ui
3.按需引入select组件
在main.js中写入如下代码
1 2 3 4 5 6 7 8 9 10 11 | /* 导入第三方库开始 */ 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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <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 点击编辑弹出dialog组件中select组件绑定值改变,但是不触发change事件的方法
代码结构如下:
现象视频如下:
现象原因:经过排查发现 此时点击操作不触发chang事件,后台响应数据中没有订单取消原因orderCanleRemark字段,此时导致不触发change事件,
解决方案:
方案1:让后台配合响应该字段,无论是否为空都响应该字段
方案2:在后台响应数据赋值给,this.form之前,手动添加该字段到后台响应数据中
代码如下:
以上这篇element-ui中select组件绑定值改变,触发change事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
这篇文章主要介绍了为什么Vue3.0使用Proxy实现数据监听?defineProperty表示不背这个锅,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-10-10Vue使用xlsx和xlsx-style导出表格出现部分样式缺失的问题解决
这篇文章主要为大家详细介绍一下Vue使用xlsx-style导出excel时样式的设置,以及出现添加背景色,合并单元格部分样式缺失问题的解决,需要的可以参考下2024-01-01
最新评论