select默认选中及赋值问题

 <!--当select值改变时,获取相对应气体语音列表的数据--><el-select v-model="warnLevelId" placeholder="请选择" style="width:150px;margin-left: 20px;" @change="handleGetWarnVoiceList"><el-optionv-for="item in gasLevelList":key="item.id":label="item.levelName":value="item.id"/></el-select>

  watch: {// 监听气体警报绑定的ID 更改后将当前修改的等级和声音ID保存到要上传的数组中'warnGasList': function() {this.warnGasChange()}},methods:{// 获取声音信息(切换气体等级)handleGetWarnVoiceList() {// 根据气体等级ID获取相应的声音ID，并赋值给单选组fetchVoiceDataByGasLevel(this.warnLevelId).then(resp => {this.warnGasList = resp.data.data[0].rangSettingId})// 遍历数组 找到当前切换气体以及当前选择的声音Id 更新到数组中for (let i = 0; i < this.gasLevelSetting.length; i++) {if (this.gasLevelSetting[i].levelId === this.warnLevelId) {// 第i条数据为当前修改的数据，则使用$set方法，将当前的气体等级和对应的声音ID保存到数组中,i为插入位置this.$set(this.gasLevelSetting, i, { levelId: this.warnLevelId, setId: this.warnGasList })}}},// 单选组绑定的值发生改变的时候触发的事件warnGasChange() {console.log('this.warnGasList')console.log(this.warnGasList)// 遍历数组 找到当前切换气体以及当前选择的声音Id 更新到数组中for (let i = 0; i < this.gasLevelSetting.length; i++) {if (this.gasLevelSetting[i].levelId === this.warnLevelId) {// 第i条数据为当前修改的数据，则使用$set方法，将当前的气体等级和对应的声音ID保存到数组中,i为插入位置this.$set(this.gasLevelSetting, i, { levelId: this.warnLevelId, setId: this.warnGasList })}}}}

要实现的功能是根据select选中的气体等级显示相应的绑定的气体警告声音的值，并可以更改

1.拿到select循环数组的第一项赋值给select绑定的值，完成select默认选中第一条
2.根据气体等级走接口拿到对应的数据，赋值给单选组按钮绑定的值
3.监听单选组按钮绑定的值，发生改变时，触发函数，将操作的值更新存储到数组中
（gasLevelSetting 数组为需要上传给后台的数组，在上传前转成json串）

select默认选中及赋值问题相关推荐

jQuery 设置select默认选中问题
在进行其他操作后,恢复select默认选中 html代码: <select id="shai" style="width:150px;margin:5px 50px ...
vue.js 默认选中select_vue.js 解决v-model让select默认选中不生效的问题
笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这 ...
antd checkbox 默认选中_antd + select 默认选中问题？
题目描述 react + antd select 默认选中问题题目来源及自己的思路我是通过 const { getFieldDecorator } = this.props.form;来设置他们的 ...
css select默认选中字体颜色,通过js修改input、select默认字体颜色
textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失输入您要输入的内容 select默认选中项颜色为灰色,选择后变为黑色(js实现) var unSelected = " ...
通过JS修改select默认选中值触发onchage事件
通过JS修改select默认选中值触发onchage事件前言一.body部分二.js部分前言页面加载时,通过js修改select选中值,触发onchange事件,实现联动效果以下是本篇文章 ...
ASP判断select默认选中代码
ASP判断select默认选中的代码如下: dim level level = rs("a_level") <select name="level"> ...
struts2 select 默认选中
jsp: <s:select list="#{'1':'男','2':'女'}" name="sex"/> action: private Stri ...
element中select默认选中第一个_探索在网页中使用“标注”
github地址:https://github.com/1314mxc/yunUI ,欢迎star! 说起"标注",在HTML5之前,你可能想起的是各种浏览器插件,emmmmmmm ...
select默认选中的option_macOS下妙用option按键
macOS下option键是非常重要的按键,它的特性是激活一些隐藏功能,所以经常被多数人忽视.现在总结一下option键让你意想不到的功能吧. 最大化窗口 mac左上角三个按钮默认为关闭最小化和全屏 ...
select默认选中的option_技巧：MacOS 中 Option 键的隐藏功能
MacOS 中 Option 键是非常重要的按键,它的特性是激活一些隐藏功能,经常被忽视.看完下文再也不会觉得 Option 是个没啥用的按键了. 一.最大化窗口 Mac 左上角三个按钮默认为关闭.最 ...

select默认选中及赋值问题

select默认选中及赋值问题相关推荐

最新文章

热门文章