el-select去掉placeholder属性的方法
更新时间：2023年12月22日 09:42:44 作者：再希
当el-select的disabled属性为true的时候不展示“请选择”字样,如何去掉el-select 元素的 placeholder 属性呢,下面小编通过示例代码给大家分享el-select如何去掉placeholder属性,感兴趣的朋友一起看看吧
功能要求是：当el-select的disabled属性为true的时候不展示“请选择”字样
1、要去掉 el-select 元素的 placeholder 属性，可以在代码中将其设置为空字符串。
<el-select placeholder="" ...></el-select>
注意：这种方式有时候会不生效可能会受其他文件样式影响如样式覆盖，组件属性继承等，所以可以通过修改样式来实现
2、如果想要全局修改的话，可以使用css修改
找到项目里设置全局样式的文件，使用伪类选择器将placeholder属性文字颜色透明度设置成0
.el-select .el-input.is-disabled .el-input__inner::placeholder{
opacity:0
}
代码如下
<script setup>
import {ref} from 'vue'
let config = ref('')
</script>
<template>
<el-select placeholder="请选择国家" v-model="config" disabled>
<el-option label="中国" value="1"></el-option>
</el-select>
</template>
<style>
.el-select .el-input.is-disabled .el-input__inner::placeholder{
opacity: 0;
}
</style>到此这篇关于el-select去掉placeholder属性的方法的文章就介绍到这了,更多相关el-select placeholder属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
又是一个老生常谈的功能，接下来会从零实现一个万年日历，从布局到逻辑，再到随处可见的打卡功能。文中的示例代码简洁易懂，需要的可以参考一下2023-01-01
Vue+Echarts报错Cannot set properties of undefined (settin
这篇文章主要介绍了Vue+Echarts报错Cannot set properties of undefined (setting ‘plate‘)的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
页面中会有很多时候需要弹窗提示,下面这篇文章主要给大家介绍了关于Vue设置提示和警告弹出框的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系，这篇文章主要介绍了vue webpack打包原理,本篇介绍的有点长，希望大家耐心阅读2023-02-02
本篇文章主要介绍了深入理解Vue生命周期和手动挂载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
element-ui中实现tree子节点部分选中时父节点也选中
这篇文章主要介绍了element-ui中实现tree子节点部分选中时父节点也选中的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Element-ui el-tree新增和删除节点后如何刷新tree的实例
这篇文章主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue3在setup中使用mapState方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了浅谈Vue.set实际上是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论