草庐IT

修改el-select的样式

coderzrf 2023-03-28 原文

1.描述

需求是修改el-select中el-option样式，当label长度过长时以省略号显示。

2.思路

通过F12查看DOM树，找到el-option的是.el-select-dropdown__item中的span ，然后为了不污染其他的组件中的样式，利用样式穿透，但结果出乎意料，并没有修改成功。

<el-select v-model="input">
     <el-option label="你好呀你好呀你好呀你还好呀" value="1" />
     <el-option label="嗨" value="2" />
</el-select>

<style scoped>
>>> .el-select-dropdown__item span {
  display: block;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
失败样例

3.失败原因分析

scoped的作用范围是在div#app中的，查看DOM树发现，el-select的容器并不是挂载在#app下面的，自然而然，样式穿透无法生效。


DOM树

4.解决方案

查看Element UI的官方文档，可以发现，el-select为我们提供了一个属性，将该数据设置为false，即可将el-select的父容器移动到#app之下，从而达到一开始的目的。

<el-select v-model="input" :popper-append-to-body="false">
属性解释

成功设置
el-selectselectsection

有关修改el-select的样式的更多相关文章

  1. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  2. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  3. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  4. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  5. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  6. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  7. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

    我有一个集合选择:此方法的单选按钮是什么？谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中，它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/18525986/

  8. ruby - Rails 3 - 我可以将开始日期设置为 date_select 方法吗？ - 2

    date_select方法只能设置:start_year，但我想设置开始日期(例如3个月前的日期)(但没有这样的选项)。那么，我可以将开始日期设置为date_select方法吗？或者，要制作这样的选择框，我应该使用select_tag和options_for_select吗？或者，有什么解决办法吗？谢谢， 最佳答案 有可能……例如:start_year–设置年份选择的开始年份。默认为Time.now.year-5参见thisresource. 关于ruby-Rails3-我可以将开始日期

  9. ruby-on-rails - Ruby on Rails - 我可以在调用之前修改属性的值吗？ - 2

    假设我有一个名为Product的模型，其中有一个名为brand的字段。假设brand的值以this_is_a_brand格式存储。我可以在模型(或其他任何地方)中定义一个方法，允许我在调用brand之前修改它的值吗？例如，如果我调用@product.brand，我想得到ThisisaBrand，而不是this_is_a_brand。 最佳答案 我建议使用方括号语法([]和[]=)而不是read_attribute和write_attribute。方括号语法更短并且designedtowraptheprotectedread/writ

  10. ruby - 如何在 Ruby 中使用 "fake"C# 样式属性？ - 2

    编辑:我稍微更改了规范，以更好地符合我的想象。好吧，我真的不想伪造C#属性，我想将它们合而为一并支持AOP。给定程序:classObjectdefObject.profile#magiccodehereendendclassFoo#Thisisthefakeattribute,itprofilesasinglemethod.profiledefbar(b)putsbenddefbarbar(b)puts(b)endcomment("thisreallyshouldbefixed")defsnafu(b)endendFoo.new.bar("test")Foo.new.barbar("t

随机推荐