当前位置: 首页 > 工具软件 > Flat Select > 使用案例 >

el-select的v-model

司寇照
2023-12-01

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)]);
},
 类似资料: