el-select options选项的显示和隐藏

最新推荐文章于 2024-04-25 17:07:47 发布

欢脱的小猴子

最新推荐文章于 2024-04-25 17:07:47 发布

阅读量5.5k

点赞数 7

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/m0_50666077/article/details/131329471

版权

在Vue.js项目中，当需要基于options的status字段控制el-select下拉选项的显示和隐藏时，可以使用一个额外的span包裹el-option，并通过CSS来实现。通过v-for遍历options，结合v-bind:class，当status等于特定值时添加一个CSS类（如hidden-options），设置其display为none，从而达到隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-select options选项的显示和隐藏

项目需求

el-select的下拉选项，对options的操作只有disabled，但是在项目开发中，需要根据status字段，控制某个options的显示/隐藏

具体实现

在el-option外层包一个span标签，通过CSS控制显示与隐藏就可以了

<el-select v-model="value" placeholder="请选择">
   <span   v-for="item in options" :class="[+ opt.status === 0 ? 'hidden-options' : '']">
	   	<el-option
	      :key="item.value"
	      :label="item.label"
	      :value="item.value">
	    </el-option>
   </span>
</el-select>

在css中定义hidden-options样式