ElementUi中ref和id两种方式或者dom进行样式更改；el-input，el-select，el-textarea通过ref获取改变边框等样式，及通过id获取改变样式

吃月亮的猩猩

已于 2022-11-04 11:56:19 修改

阅读量1.4k

点赞数

文章标签： vue.js javascript ecmascript

于 2022-10-19 17:44:58 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41180882/article/details/127411804

版权

本文探讨了在ElementUi中如何使用ref和id来更改el-input、el-select和el-textarea的样式。通过ref动态获取组件并改变边框样式，详细介绍了在验证前后调整样式的方法。同时，也提到了通过id选择器结合类名和样式穿透技术来实现样式的改变。

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

使用elment的el-input，el-select，el-textarea通过ref获取到加上边框等样式的方式

我这里是写的关于或者到错误的输入框然后将样式更改

在需要的地方通过ref设置好名称，然后通过array拿到对应需要改变的ref，通过遍历对每个进行样式更改，通过refs拿到的进行验证，判断是输入框还是文本域还是选择框，然后做样式更改。

利用ref获取到单独的框，然后通过末班字符串形式遍历加上去改变样式，也可以自己打印refs，可以看看对比

 // 错误的框进行改变
    changeColor() {
   
        let array = this.ErrData
              array.forEach(item => {
   
                // console.log(this.$refs[`${
    item}`],'111');
                if(this.$refs[`${
    item}`].$children.length <1){
   
                  if(this.$refs[`${
    item}`].$refs.input