el-select的v-model

el-select的v-model

前言

有一个组件，里面只有一个下拉款，选择下拉款的数据时，会根据其中一个字段判断是否生成下一个下拉款，这就需要调用它自身，并且用这个组件的时候，绑定的值需要是数组。

父组件：

<DictSet
  v-model="dictSetArray"
  :dict-set="dictSet"
/>

子组件：

<template>
  <span class="dictset">
    <el-select
      v-model="result[0]"
      value-key="label"
      :filterable="!isOnlyOneValue && filterable"
      :clearable="clearable"
      :disabled="isOnlyOneValue || disabled || !dictSelectList.length"
      :placeholder="dictPlaceholder"
      :size="size"
      @change="handleSelectChange"
    >
      <el-option
        v-for="item in dictSelectList"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <DictSet
      v-if="nextDictSet"
      :key="key"
      v-model="result[1]"
      :dict-set="nextDictSet"
      :size="size"
    />
  </span>
</template>

组件中的el-select绑定的是数组的第一项，组件调用的组件绑定的是数组的第二项。

这样有两个下拉款的时候result就是这种形式：[ value1, [ value2, [ ] ] ]

最后监听result的变化，发送input时间

result(newVal, oldVal) {
  this.$emit("input", [...this.result.flat(Infinity)]);
},