Element UI 中 el-input 标签去掉边框的一种办法

这篇具有很好参考价值的文章主要介绍了Element UI 中 el-input 标签去掉边框的一种办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近在做一个简单的页面,想把 el-input 去掉边框,在网上找了很多方法,最终发现下边这种方法是可行的:

HTML代码:

 <el-input v-model="input" class="borderNone" placeholder="此处展示结果"></el-input>

样式代码如下:

<style lang="less" scoped>
.borderNone /deep/ .el-input__inner {
  border: none;
}
</style>

注意这里的样式语言用的是 less,其深度穿透写法是 /deep/。
由此便可去除 el-input 的外边框。文章来源地址https://www.toymoban.com/news/detail-596317.html

到了这里,关于Element UI 中 el-input 标签去掉边框的一种办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element UI el-input 只能输入大于0的正整数

    当输入值以0开头或者不为0-9的整数时,则用\\\' \\\'替换掉(/g表示全局匹配,则所有匹配项都会被替换掉),效果为不能输入以0开头或不为正整数的值。

    2024年02月14日
    浏览(45)
  • Element UI 中el-input 框回车触发页面刷新问题及解决

    问题描述 当el-input 获取焦点后按到回车按钮会刷新当前页面 问题解决 在el-form标签增加表单事件@submit.native.prevent,防止搜索框回车键刷新整个页面

    2024年02月09日
    浏览(43)
  • 解决:element ui表格表头自定义输入框单元格el-input不能输入问题

    表格表头如图所示,有 40-45,45-50 数据,且以输入框形式呈现,现想修改其数据或点击右侧加号增加新数据编辑。结果不能输入,部分代码如下 我看在这一块 template 中不需要用到 scope 去获取数据,于是没有加上 slot-scope=\\\"scope\\\" 结果不能输入,解决方法就是在表头自定义时将

    2024年02月03日
    浏览(43)
  • vue element-ui el-input输入框绑定@keyup.enter回车事件无效

    由于element-ui把input进行了封装,input外面是多一层div的。 在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。 所以对于el-input,使用 @keyup.enter是无效的,需要加上 .native 限制符 .native修饰符的作用:

    2024年02月16日
    浏览(39)
  • Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)

    1、子组件封装 注意使用:正常使用 // 子组件使用 父组件调用

    2024年02月11日
    浏览(63)
  • 解决使用element ui时el-input的属性type=number,仍然可以输入e的问题。

    使用element ui时el-input的属性type=number,仍然可以输入e, 其他的中文特殊字符都不可以输入,但是只有e是可以输入的,原因是e也输入作为科学计数法的时候,e是可以被判定为数字的, 但是有些场景是需要把e这种情况屏蔽掉的,我们可以使用如下的方法。 在进行键盘事件输入

    2024年02月08日
    浏览(35)
  • element-ui的el-form表单和el-table校验嵌套使用校验el-input和el-select

    场景:前端开发中,经常会遇到比较多的表单填写页面,其中有el-form,el-table,表格的每一列中又嵌套着输入框或者下拉框,然后每个还需要做单独的校验 效果:   点击保存可校验el-input和el-select是否有值,不符合校验规则就标红提醒   1.el-form里面嵌套el-table 2.在el-table-column自定义内

    2024年02月02日
    浏览(39)
  • 【已解决】element-ui组件嵌套太多层,导致内部el-input和el-select 等组件无法正常输入解决方案

    如果 element-ui 组件嵌套太多层,可能会导致内部的 el-input 和 el-select 等组件无法正常输入。 出现这种问题通常是由于 z-index 属性设置不正确导致的。 解决这个问题的方法是调整组件的 z-index 属性,使其不会被其他组件覆盖。以下是一个解决方法: 在上面的代码中,我们首先

    2023年04月13日
    浏览(45)
  • el-table中的el-input标签修改值,但界面未更新,解决方法

    在el-table中的el-input里面写的change事件根本不触发,都不打印,试了网络上各种方法都没用 然后换成input事件,input事件会触发,但界面也未更新。我在触发事件的时候,生成一个值,用于刷新界面再绑定到el-table上,但会导致界面强制刷新,体验感很差, 解决 把生成的key值绑

    2024年02月06日
    浏览(53)
  • Element VUE修改 el-input和el-select长度

     没有设置样式之前,采用默认样式,界面如下:  模拟代码如下  为了美观需要修改下样式,使文本框与下拉框的长度一致 第一种:添加style属性,采用行内样式修改长度  第二种:添加class属性,采用内部样式  stule标签中设置长度 第三种:找到element-ui.scss,采用外部样式

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包