a-select下拉显示的文字和选中之后回显在select上的文字不同的实现

这是我的项目的实现，我这个还加的用户可以自己填写

实现的效果就是这样。。。。

直接上代码

<a-select
                  v-model="form[item.propName]"
                  :placeholder="item.controlPrompt"
                  show-search
                  :showArrow="false"
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  :style="{
                    width: '100%',
                    fontSize: item.controlStyle == null ? '12px' : item.controlStyle[1],
                    color: item.controlStyle == null ? '#000' : item.controlStyle[1],
                    border: item.color
                  }"
                  v-else-if="item.dataType == 'CHAR' && item.propName === 'classCode'"
                  :title="item.color === '1px solid red' ? item.err : ''"
                  option-label-prop="label"//这个是实现这个的主要功能
                  @select="changeClassCode"
                  @change="changeInput(item)">
                  <a-select-option
                    v-for="i in classCodeOptions"
                    :key="i.value"
                    :value="i.text"
                    :label="i.text">
                    {{ i.label }}
                  </a-select-option>
                </a-select>

然后是classCodeOptions数据

 this.classCodeOptions = arr.data.map(i => {
        return {
          value: i.rllcClass,
          text: i.rllcClass,
          label: `${i.rllcClass}${i.rllcRange}`,
          rllcLength: i.rllcLength, //保管期限
          rllcLevel: i.rllcLevel //密级
        };
      });

这样就搞定了，，，，XDM帮助到你的话，感谢三连！！！！