Select 下拉框选中值期望与下拉框的options值不同

最新推荐文章于 2023-11-08 18:41:34 发布

lixh_man

最新推荐文章于 2023-11-08 18:41:34 发布

阅读量1k

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/lixinhua_man/article/details/118145506

版权

当需要在Vue项目中使Select组件的显示值(name+code)与选中值(code)不同时，可以利用slot插槽进行自定义。通过将code的值赋给Option的label属性，实现选中时仅显示code，而在下拉框中显示name+code的组合。这种方法避免了模糊搜索功能，适用于不涉及模糊搜索的业务场景。

摘要由CSDN通过智能技术生成

有时候期望下拉框的值显示与选中的值希望不一致时，

可以采用slot插槽，

当然还有另一种模糊搜索也可以处理，但是业务暂时不需要涉及到那块

eg :
    optios的显示的值 为 name + code  
    而select 选中的值只想要 code在上面时
    采用 slot解决
	 <Select v-model="materielInfo.unitOfMeasurementCode"    					 style="width:150px"  :disabled="!editable('unitOfMeasurementCode')"  >
                      <Option v-for="item in meteringList"  :value="item.value"  :key="item.id" :label="item.value">
                          <div slot>{{item.label}}</div>
                      </Option>
                    </Select>