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

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样式

.hidden-options {
  display: none;
}