当前位置:首页 > 编程教程 > vue技术文章 > element-ui中select组件绑定值改变,触发change事件方法

关于element-ui中select组件绑定值改变,触发change事件详解

  • 发布时间:
  • 作者:码农之家
  • 点击:111

这篇文章主要知识点是关于element-ui、select、change、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js前端开发:快速入门与专业应用
  • 类型:前端开发大小:3.6KB MB格式:PDF作者:陈陆扬
立即下载

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

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事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.836587

vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

我使用的是element-ui V2.2.3。代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值。 select.vue文件 template div div class="row" v-for="RowItem in rows" div class="col" v-for="colItem in RowItem.configVos" el-select v-model="formData[colItem.paramCode]" :class="getModel(colItem.paramCode)" @change="onSelectChange(colItem.paramCode,formData[colItem.paramCode])" el-option v-for="option in colItem.configOptions" :label="option.optionCode" :value="option.optionValue" /el-option /el-select /div /div /div /templatescript import axios from 'axios'; export default { data() { return { groupItem:{}, formData:{}, rows:'', cols:'' } }, watch:{ }, methods:{ getfordata:function(){ var _this = this; axios.get('../json/selectdata.json') .then(function(res){ _this.groupItem = res.data; var row = _this.groupItem[0].rowData; _this.rows = row; for(var i=0;irow.length;i++){ var col = row[i].configVos; for……

网友NO.401613

element-ui 关于获取select 的label值方法

在某些场景下,还是需要在获得label的值跟Value值的。 vue获取值的方式: el-form-item label="库位" prop="goodsLocationId" el-col :span="15" el-select v-model="scope.row.goodsLocationId" placeholder="货位地址" @change="changeLocationValue" el-option v-for="lo in locations" :label="lo.locationName" :value="lo.id" :key="lo.id"/el-option /el-select /el-col /el-form-item js: changeLocationValue(val){ //locations是v-for里面的也是datas里面的值 let obj = {}; obj = this.locations.find((item)={ return item.id === val; }); this.wareHouseVO2.goodsLocationName = obj.locationName; }, 这可以获得相应的值减少其他数据库的操作。 拓展知识:Element ui select同时获取value和label的值的实例 如下所示: el-form-item v-if="isMD" label="业务员名称" el-select v-model="addBM.storeManagerName" @change="selectGet" filterable placeholder="请选择门店业务员名称" el-option v-for="item in userList" :key="item.id" :label="item.n……

网友NO.184640

详解element-ui中el-select的默认选择项问题

直接绑定将option中的value值绑定给v-model template div el-select v-model="query" el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"/el-option /el-select /div/templatescriptexport default{ data() { return { options: [{ value: '01', label: '我的' }, { value: '02', label: '你的' }, { value: '03', label: '他的' }], query: '02' } }}/scriptstyle/style 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com