select默认选中及赋值问题

实现的效果

 <!--当select值改变时,获取相对应气体语音列表的数据-->
          <el-select v-model="warnLevelId" placeholder="请选择" style="width:150px;margin-left: 20px;" @change="handleGetWarnVoiceList">
            <el-option
              v-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默认选中及赋值问题

猜你喜欢