ElementUi下拉列表样式

油乐王子

于 2021-11-09 16:14:29 发布

阅读量964

点赞数

分类专栏：笔记文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_54757930/article/details/121230622

版权

笔记专栏收录该内容

62 篇文章

订阅专栏

本文详细介绍了如何在ElementUi中自定义下拉列表的样式，包括使用JavaScript操作DOM进行样式修改，以及通过CSS类名控制显示效果。同时，讨论了Vue组件的样式隔离问题及其解决策略，确保下拉列表样式只在当前组件生效。

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

在这里插入图片描述

<!--实现下拉列表左右分割-->
<el-select 
         v-model="scope.row.supplier" 
         placeholder="请选择供货商" 
         @visible-change="selectTrue($event,scope.row)"
         @change="chooseoption">
         <el-option
                   v-for="item in options"
                   :key="item.corporateId"
                   :label="item.corporateName"
                   :value="item.corporateId">
                   <span style="float: left">{{ item.corporateName | ellipsis }}</span>
                   <span style="float: right; color: #8492a6; font-size: 13px">{{ item.goodsStock }}{{ scope.row.goodsUnit }}</span>
		 </el-option>
</el-select>