select 自匹配问题

原生js给select赋值或者vue绑定数据，会自匹配下拉选项的value或者key，从而显示对应的label或者对应的option的html

eg：

原生：

<select name="" id="">

<!-- <option value="1" key='1' label="测试1"></option>

<option value="2" key='2' label="测试2"></option>

<option value="3" key='3' label="测试3"></option>

<option value="4" key='4' label="测试4"></option>

<option value="5" key='5' label="测试5"></option> -->

<option value="1">测试1</option>

<option value="2">测试2</option>

<option value="3">测试3</option>

<option value="4">测试4</option>

<option value="5">测试5</option>

</select>

<button>修改下拉框显示的值</button>

<script>

var btn = document.querySelector('button')

btn.onclick = function() {

document.querySelector('select').value = '3'

}

</script>

 

 

vue绑定数据（此例为element ui）：

<el-select v-model="data.productInspectionDialog.qualityStandard" :placeholder="$t('page.style.index.placehoder.qualityStandard')" >
  <el-option
    v-for="item in options.qualityStandard"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  />
</el-select>
绑定的值初始化或者修改的时候可以赋值与key或者value相同，自动匹配选项