如何动态获取element UI组件内的元素标签并给样式（ref获取类名）

最新推荐文章于 2023-12-07 14:21:21 发布
最新推荐文章于 2023-12-07 14:21:21 发布
阅读量5.3k 收藏 4
点赞数
分类专栏： element UI 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39418338/article/details/112213414
版权

 el-input-number改变输入框字体颜色

 <el-input-number v-model="baseData.expiryDate" size="mini"  :min="1" disabled ref="inputNumber"></el-input-number>

this.$refs.inputNumber.$el.getElementsByClassName('el-input__inner')[0].style ="color:#000 !important"

最胖的小仙女
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取元素的标签名实现方法
11-24
总的来说，获取元素标签名的关键在于使用`element.tagName`属性，并确保在比较时忽略大小写。这使得代码能够正确处理不同浏览器之间的差异，从而实现跨浏览器兼容的功能。在处理DOM元素时，这样的技巧是非常实用的。
ElementUi中ref和id两种方式或者dom进行样式更改；el-input，el-select，el-textarea通过ref获取改变边框等样式，及通过id获取改变样式
qq_41180882的博客
10-19 1217
ref和id两种方式或者dom进行样式更改在需要的地方通过ref设置好名称，然后通过array拿到对应需要改变的ref，通过遍历对每个进行样式更改，通过refs拿到的进行验证，判断是输入框还是文本域还是选择框，然后做样式更改。利用ref获取到单独的框，然后通过末班字符串形式遍历加上去改变样式，也可以自己打印refs，可以看看对比取消样式改变。
通过ref获取element表格内的子标签，解决多个相同组件通过className获取到dom，修改样式时相互冲突
jierleijiajia的博客
11-10 198
const tableRef = ref()tableRef.value.$el.getElementsByClassName('el-table__body-wrapper')
(Select)解决：动态获取从 [Element-ui] 的 Select (选择器)选中的 label 值得 id 与 name 等所有属性值
狮子座的男孩
04-23 6249
1、描述： 从后台传过来的数据，想让它显示在 Select 选择器的栏中，并想动态获取所选中的 label 值的 id 与 name 等属性值，以备后用；
Vue el-table-column 动态使用style
chenhuashen123的博客
06-23 2380
这几天在做一个基于el-table-column的二次封装，主要是针对于el-table-column对于多布局的使用比较麻烦，途中需要用到外界传入style 样式，那么怎么动态的使用style 呢，下面直接上代码 这个是封装的表头文件，如果需要自定义s tyle 的话，需要在这个文件里面填写样式 { prop: 'medium', label: '媒体', width: 180, type:adapter_column_type.INPUTER }, { .
【Vue】修改组件样式并动态添加样式
最新发布
karshey的博客
12-07 777
但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。假设想修改两个圆之间的线的长度，由于组件没有暴露相关的类名，我们需要自己修改它。组件中的一些类可能添加样式无法生效。动态添加完类后发现样式不生效。可以确认类是已经添加了的。使用组件库中的组件，修改它的样式并动态添加/删除样式。可以生效：注意，deep与后面的括号不能有空格。由于这里使用的是组合式API，没有。最后一个节点下面的tail不显示。
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
10-24
例如，如果你有一个类名为`.element`的元素，你可以这样选取它： ```javascript var element = document.querySelector('.element'); ``` 2. 使用`window.getComputedStyle`方法，将选取的元素和伪元素的字符串...
Java 获取当前类名和方法名的实现方法
08-29
Java 获取当前类名和方法名的实现方法 Java 获取当前类名和方法名的实现方法是 Java 编程语言中一个重要的知识点。通过获取当前类名和方法名，可以帮助开发者更好地了解程序的执行流程， Debug 程序和优化代码性能...
element-ui table行点击获取行索引（index）并利用索引更换行顺序
10-15
在Element-UI框架中，`el-table` 是一个强大的组件，用于展示表格数据。当我们需要在用户点击表格行时获取其对应的行索引，并利用这个索引来改变行的顺序，可以按照以下步骤进行操作。 首先，我们需要在表格的每一...
vue中动态添加class类名的方法
10-18
在Vue.js中，动态添加class类名是一种非常实用的功能，它允许我们在运行时根据组件的状态或数据来改变元素的样式。下面将详细讲解在Vue中动态添加class类名的几种常见方法。 ### 1. 对象形式 Vue允许我们使用一个...
#vue#【十四】 element同级类名&类名优先级
ZHENGCHUNJUN的博客
07-14 1055
类名优先级问题 .在element的使用过程中，我们经常会遇到下面这种类型的同级类名 class=“el-button el-button–default” 代表这两个类名是同级的 <button type="button" class="el-button el-button--default"><span>取消</span></button> element在写样式的时候，就先给html根标签一个新的类名 就是在最大的div里面写上新的类名 示例如下：
element ui Tag 动态添加标签
codercjw的博客
01-12 2413
element ui Tag 动态添加标签
elementUI 自定义类名使用方法
qq_18228337的博客
08-11 3297
比如el-popover 添加的类名不能写到scoped 样式表里，要直接写在style里
Element UI中的图标
wjbltxx的专栏
01-30 1542
Element UI中的图标
Element-ui和Element-plus获取所有icon
向梦想前进
07-30 1048
【代码】Element-ui和Element-plus获取所有icon。
Vue获取DOM节点方式
qq_45829293的博客
03-08 6922
文章目录Vue获取DOM节点1、原生js获取节点的方式2、在vue项目中引入jquery3、ref属性4、直接使用DOM API寻找元素 Vue获取DOM节点 1、原生js获取节点的方式 document.getElementById() – 使用id获取方式较少 document.getElementByClassName() – 类名 document.getElementByTagName() – 标签名 document.getElementByName() – name属性，使用少
Vue中ref属性
weixin_38098192的博客
05-30 2884
利用ref属性，可以获取到DOM元素或者是子组件，从而可以调用子组件方法1.当ref属性直接定义在dom元素上，则通过this.$ref.name可以直接获取到dom，对dom直接进行操作；1&lt;div class="foods-wrapper" ref="foods-wrapper"&gt;注意：ref的属性命名不能用驼峰（即不能中间为大写字母）let menuList=this.$refs...
动态追加标签，获取某标签下的标签个数
LDBZXD的博客
12-25 928
ajax返回字符串，使用split将字符串变成数组，将取得的数组动态的展示在前台 $.ajax({ type : "POST", dataType : 'text', url : "./detailDataName", // data:{model:encodeURI($("#model").val())}, data:{model:$("#model").val()}, e
元素选择器element
qq_45593083的博客
10-23 528
<script type="text/jscript" src="jquery-3.4.1.min.js"></script> <body> <!-- 元素选择器的使用方法 元素选择器是根据元素名称匹配相应的元素 多数情况下,元素选择器匹配的是一组元素 &("element") 其中element 是获取元素的标记名 ...
用element-ui的表格组件生成一个可上下拖拽的组件
07-14
你可以使用 Element UI 的 `<el-table>` 组件结合拖拽库，实现一个可以上下拖拽的表格组件。以下是一个示例代码： ```vue :data="tableData" :row-key="getRowKey" ref="dragTable" :row-class-name=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值