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>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/295660.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HBase基础知识(三):HBase架构进阶、读写流程、MemStoreFlush、StoreFile Compaction、Region Split

1. 架构原理 1&#xff09;StoreFile 保存实际数据的物理文件&#xff0c;StoreFile以HFile的形式存储在HDFS上。每个Store会有一个或多个StoreFile&#xff08;HFile&#xff09;&#xff0c;数据在每个StoreFile中都是有序的。 2&#xff09;MemStore 写缓存&#xff0c;由于…

LED灯驱动模块加载与卸载代码框架

一. 简介 本文来编写 LED灯驱动模块加载与卸载的代码。 二. LED灯驱动模块加载与卸载代码框架 1. 创建工程 我的驱动代码存放目录&#xff1a; ubuntu系统 /home/wangtian/zhengdian_Linux/Linux_Drivers 目录下。 进入 /home/wangtian/zhengdian_Linux/Linux_Drivers 目…

【Amazon 实验①】使用Amazon WAF做基础 Web Service 防护

文章目录 一、实验介绍二、实验环境准备三、验证实验环境四、Web ACLs 配置 & AWS 托管规则4.1 Web ACLs 介绍4.2 Managed Rules 托管规则4.3 防护常见威胁类型&#xff08;sql注入&#xff0c;XSS&#xff09;4.4 实验步骤4.4.1 创建Web ACL4.4.2 测试用例4.4.3 测试结果4…

uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)

效果预览 相关代码 页面–我的 src\pages\my\my.vue <!-- 个人资料 --><view class"profile" :style"{ paddingTop: safeAreaInsets!.top px }"><!-- 情况1&#xff1a;已登录 --><view class"overview" v-if"membe…

Linux bridge开启hairpin模拟测试macvlan vepa模式

看到网上介绍可以通过Linux bridge 开启hairpin方式测试macvlan vepa模式&#xff0c;但是没有找到详细资料。我尝试测试总提示错误信息&#xff0c;无法实现&#xff0c;经过几天的研究&#xff0c;我总算实现模拟测试&#xff0c;记录如下&#xff1a; 参考 1.Linux Macvla…

MySQL报错:1054 - Unknown column ‘xx‘ in ‘field list的解决方法

我在操作MySQL遇到1054报错&#xff0c;报错内容&#xff1a;1054 - Unknown column Cindy in field list&#xff0c;下面演示解决方法&#xff0c;非常简单。 根据箭头指示&#xff0c;Cindy对应的应该是VARCHAR文本数字类型&#xff0c;字符串要用引号&#xff0c;所以解决方…

如用postman进行web端自动化测试(超详细解析)

前言 概括说一下&#xff0c;web接口自动化测试就是模拟人的操作来进行功能自动化&#xff0c;主要用来跑通业务流程。 主要有两种请求方式&#xff1a;post和get&#xff0c;get请求一般用来查看网页信息&#xff1b;post请求一般用来更改请求参数&#xff0c;查看结果是否正…

SpringBoot3-核心原理

生命周期监听 场景&#xff1a;监听应用的生命周期 1. 监听器-SpringApplicationRunListener 自定义SpringApplicationRunListener来监听事件&#xff1b; 1.1. 编写SpringApplicationRunListener 实现类 1.2. 在 META-INF/spring.factories 中配置 org.springframework.boo…

安装vcpkg管理opencv的安装+MFC缺失的解决

第一步&#xff0c;出现#include没有办法找到opencv头文件的问题&#xff0c;无法解决 在VC的提示下&#xff0c;安装了vcpkg&#xff0c;然后用vcpkg命令来帮助安装opencv&#xff0c;过程十分顺利。 1. cmd 到命令行窗口&#xff1b; 2. 建立src文件夹&#xff0c;并进入…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)Channel 模块的实现

在这篇文章中虽然实现了能够和多客户端建立连接&#xff0c;并且同时和多个客户端进行通信。 基于多反应堆的高并发服务器【C/C/Reactor】&#xff08;上&#xff09;-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/135141316?spm1001.2014.3001.5501但是有…

探索微软Edge:使用方法和心得分享

学习目标&#xff1a; 了解微软Edge的基本功能和使用方法。掌握在微软Edge上进行浏览、搜索和书签管理的技巧。学习如何使用微软Edge进行隐私和安全管理。探索微软Edge的扩展和其他高级功能。 学习内容&#xff1a; 微软Edge的简介&#xff1a;了解微软Edge的起源、特点和与其…

双非本科求职_面试经验_上集

前言 后知后觉开始找实习&#xff0c;也马上进入秋招&#xff0c;写此文一方面是记录一下我的面试经历作为复盘&#xff0c;另一方面也给同样在广州&#xff0c;双非二本的同志一个参考&#xff08;快来看菜鸟&#xff09;&#xff0c;从而获得一定的动力和自信&#xff0c;毕…