单独修改设置某一个elementui 元素的样式

最新推荐文章于 2023-07-29 23:46:05 发布
最新推荐文章于 2023-07-29 23:46:05 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 前端开发 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/122085688
版权

我这里是要修改不同的下拉框样式。

想要单独设置其中一个。

就单独给那个下拉框的el-select上加一个class即可！

但是注意！

不是直接用class！

而是用elementui 官方文档写的这个【popper-class】参数去命名。(在不同的情况。修改不同的elementui 元素的时候。要去多看官方文档！)

 

这样就能选中了。

还没完！

我们要f12审查元素看看他的结构层级。然后再去相应的修改。

我这里直接是一级的。直接就能修改了。

修改前。下面的下拉框没有和上面的框的宽度一致：

修改后的效果：

南北极之间
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
修改 element-ui 默认样式的两种方法
Sun_blog
12-24 3737
修改 element-ui 默认样式的方法有好几种，今天我来分享一下我最常用的方法； 首先，我们按F12找到我们要修改样式 DOM 对应的 class ; 然后，在原有的 style 标签后，新建一对style 标签并去掉 scoped 属性； 并在新建的style 标签中，修改element-ui 默认样式； 就像这样???? <style scoped lang="less"> // 在此处编写组件样式 </style> <style lang="less"> /
element-ui多个组件只修改其中的一个样式
weixin_44766633的博客
01-13 1253
原理：先找到上一级元素，再去定位你想修改的那个 .peopleNl /deep/.el-input{ width: 148px!important; }
VUE局部修改ElementUI样式
TIANQIcode
08-10 718
VUE局部修改ElementUI样式
elementui 单独修改一个label的样式
诚的博客
12-21 6746
样式修改不要全局，使用/deep/穿透 <el-form> <el-form-item label="活动区域" class="change-label-calss"> <el-input v-model=""></el-input> </el-form-item> </el-form> <style scoped> .change-label-calss /deep/ .el-for.
Element UI如何自定义样式
最新发布
白的夜的博客
07-29 1136
Element UI是一套非常完善的前端组件库，但是如何个性化定制其中的组件样式呢？今天我们就来聊一聊这个。
scss强修改elementUI单个组件样式
m0_68177019的博客
10-08 640
scss强修改elementUI单个组件样式
jQuery使用之设置元素样式用法实例
10-24
同时，`css(name, value)` 可以单独设置一个样式属性，如改变鼠标悬停时`<p>`元素的透明度： ```javascript $(function() { $("p").mouseover(function() { $(this).css("opacity", "0.5"); }); $("p").mouse...
html+css给单独某一表格定义样式示例
09-25
2. **table.ss**：这是一个元素选择器与类选择器的组合，它会选取所有具有 "ss" 类的 `table` 元素。这个选择器设置了表格的边框，边框宽度为 1 像素（`border: 1px solid #000;`），颜色为黑色（`#000`），并使表格...
JQuery validate 验证一个单独的表单元素实例
12-10
前提：已引入JQuery validate插件 function validateOneElement() { ...以上这篇JQuery validate 验证一个单独的表单元素实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决vue+elementui项目打包后样式变化问题
10-15
在使用Vue.js和ElementUI构建项目时，开发者经常会遇到一个问题：在开发环境下一切正常，但一旦执行项目打包，样式就会发生改变，导致页面显示效果与预期不符。这主要是由于CSS加载顺序、模块化打包工具（如Webpack...
ElementUI:多个Select下拉框存在时调整个别下拉框样式
weixin_38942919的博客
03-06 784
当dialog中存在多个下拉框的时候，想改变某一个下拉框的样式，于是给某一个select绑定类，发现并没有生效，换了一种方法，将el-select用div包裹，将类绑定在div上，也没有效果。 在控制台查看后发现，下拉框出现后与app同级 查阅ElementUI下拉框文档之后，在文档中提到popper-class，给下拉框添加类名，于是在需要改变样式的那个select下拉框绑定popper-class，用popper-class来自定义一个类 获取到类名之后，就能对想修改样式的下拉
css里用el,使用element-ui组件el-table时需要修改某一行或列的样式（包含解决选择器无效问题）...
weixin_39719732的博客
08-04 1356
在后台管理系统项目中，经常会使用element-ui中的组件el-table(表格)来展示列表数据。当展示数据的时候，可能就需要给给某一行或者列设置特殊的样式，在查询文档是我遇到了一些问题：包括设置某一行或列样式的方式；包括设置指定类名后选择器无效问题。。。。首先介绍一下，我的项目需求是列表中展示详细信息的一列，最多只展示两行数据，超出时使用...表示。实现结果如下图所示：下面介绍一下实现方式：方...
如何局部覆盖element-ui的默认样式
然而老干妈早就看穿了一切
12-09 1144
去掉scoped <style scoped> </style> 详情博客： 淵波太郎 文章地址：https://blog.csdn.net/weixin_41557291/article/details/80606525
Element-ui 给el-select添加唯一class名，修改个别el-option样式
热门推荐
Gomeer的博客
11-11 1万+
我们修改了列表项的样式，但是页面中可能会使用多个select组件，直接修改会影响全局样式，在页面渲染的时候，el-select总是会被渲染为仅次于body层级的div，我们没有办法通过父级限制它，所以我们需要给它自身添加一个class名。 <div class = "optionsContainter"> <el-select v-model="val...
element-ui常备知识
weixin_44390064的博客
01-27 2161
1.设置required:true 2.通过自定义插槽的方式 <el-form-item :label="status" class="proj-spec-col"> <label slot="label">{{status}}&nbsp;<span style="color:red">*</span></label> //通过插槽的方式 <el-select v...
element-plus修改el-select下拉框的位置
qq_43651168的博客
05-16 3968
element-plus修改el-select下拉框位置
el-select样式两种修改方式index.html或popper-append-to-body加popper-class
weixin_45634433的博客
07-21 3284
el-select样式两种修改方式index.html或popper-append-to-body加popper-class 记录一下,博主整理的很是明朗,在此记录一下,方便以后查找,感谢博主的输出, 问题描述 饿了么UI自带的样式有一般也够用，不过有时候我们需要修改一下样式使其更加美观，本文记录一下修改el-select的样式的方式，记录一下，忘了的时候回来看看 问题分析 下拉框可以分为两部分，一部分是‘框’部分，另外一部分是‘下拉’部分，平常我们修改下拉框样式，无外乎就是修改这两个部分，如下图所示 修
element table合计（可点击，自定义值，修改样式，第一行展示）
DevelopmentW的博客
10-13 4723
1、设置合计第一行展示 <style scoped> /* /deep/ 为深度操作符，可以穿透到子组件 */ /deep/ .el-table { display: flex; flex-direction: column; } /* order默认值为0，只需将表体order置为1即可移到最后，这样总计行就上移到表体上方 */ /deep/ .el-table__body-wrapper { order: 1; } </style&gt
如何修改elementUI提供的el-select组件的样式-select组件popper-class用法
weixin_38761920的博客
07-01 2266
官网提供的： 下拉框的样式，它并没有在el-select里面，而是放在了最外层，如下图： popper-append-to-body：默认是true，改成false就可以起作用。显而易见，官方默认把下拉部分加入到里，所以我们可以通过popper-append-to-body这个属性使其不加到body里，让其回归到对应el-select里面，就是把下拉部分，放回对应结构中去。 既然加入到el-select里面了，我们就可以使用css选择器找到对应层级去设置对应样式了，依然可以实现上图中的效果 方法二：
QSS文件中 单独设置某一列的属性
06-02
在QSS文件中，您可以使用伪状态选择器 `::item` 来单独设置某一列的属性。以下是一个示例代码，可以帮助您实现此功能： ```css QTableWidget::item:first-column { background-color: #cccccc; /* 设置第一列的背景颜色 */ } QTableWidget::item:first-column:hover { background-color: #dddddd; /* 设置鼠标悬停时第一列的背景颜色 */ } ``` 在上述代码中，`QTableWidget::item:first-column` 表示选择第一列中的所有单元格，`::hover` 伪状态选择器表示鼠标悬停时的状态。您可以根据自己的需求，设置第一列的背景颜色、字体颜色、边框等属性。 需要注意的是，不是所有的属性都可以通过 `::item` 选择器来设置。一些属性，如字体大小、字体类型等，需要使用 `::item:selected` 选择器或者 `::item:selected:hover` 选择器来设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值