elmentui 中 select 组件动态添加数据

elmentui 中 select 组件动态添加数据

业务场景

有一个选择用户名的下拉框，需要在下拉框中进行输入的时候判断输入的是否是一个新的值，如果是的话则进行用户数据的新增；

实现

思路：由于 select 组件新增时，新增的数据也会触发 change 事件，并且返回的值是输入的字符串，而用户数据是对象数组；所以根据 change 事件的参数与下拉框中的数据进行校验，如果无匹配项则进行数据的新增；

例子（使用的是 vue）：

// html
<el-select @change="changeSelect" filterable allow-create default-first-option v-model="value" placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

// js

changeSelect(val) {
  console.log(val)
  let flag = false
  for (let i = 0; i < this.options.length; i++) {
    console.log(this.options[i])
    if (val === this.options[i].value) { // 不是新添加的属性
      flag = true
      break
    }
  }
  if (!flag) { // 如果是新数据，则进行新增
    console.log('add user')
  }
},

产生的问题

在进行新数据的添加后，需要将当前新增的数据设置为选择项；在将接口返回的新增数据的vaule进行赋值后，下拉框上显示的值会是 value，而不是预期中的 label；

原因：由于对下拉框的数据进行了重新查询并赋值，但是由于下拉框中的数据还在渲染中，导致对下拉框绑定的变量进行赋值的操作和下拉框的可输入的属性组合生效，使这个新增的 value 变成了一个新的输入值，而并没有和下拉框中的 label 进行联动；

解决方法：将赋值操作放入 this.$nextTick() 中或者放入一个 setTimeout 中使其变为异步操作即可；