vue el-input-number调整高度和宽度

 

<el-input-number v-model="scope.row.PRICE" :precision="2" :min="0"  :controls="false" size="small"></el-input-number>
<style lang="css">
.el-input-number.is-without-controls .el-input__inner {
  width: 100px;
  line-height: 30px;
  height: 28px;
}
</style>
### 修改或移除 `el-input-number` 组件的边框样式 为了修改或移除 Element UI 中 `el-input-number` 组件的默认边框样式,可以通过自定义 CSS 或 SCSS 来实现。具体方法如下: #### 方法一:局部覆盖样式 如果只需要在一个特定页面或组件内应用此更改,则可以在该组件内的 `<style>` 标签中加入以下代码片段来调整边框属性。 ```scss <style lang="scss" scoped> /deep/ .el-input-number { border: none; // 移除整个控件的外边框 .el-input__inner { border-radius: 0; box-shadow: none; border-color: transparent; // 设置内部输入框无边框颜色 } } </style> ``` 上述代码通过 `/deep/` 深度选择器穿透作用域限制影响到子组件中的类名[^1]。 #### 方法二:全局设置 对于希望在整个项目范围内统一处理的情况,在项目的公共样式文件(如 main.css/main.scss)中添加通用的选择器即可生效。 ```css /* 全局CSS */ .el-input-number.is-controls-right .el-input__inner, .el-input-number.is-without-controls .el-input__inner { border-width: 0px !important; /* 完全消除边框宽度 */ } .el-input-number.is-controls-right .el-input-group__append button, .el-input-number.is-controls-right .el-input-group__prepend button { background-color: inherit; color: currentColor; border-left: solid 1px rgba(0, 0, 0, 0.1); border-top: none; border-bottom: none; border-right: none; } ``` 这段代码不仅去除了输入区域本身的边框,还针对右侧控制按钮进行了相应优化,使其看起来更加简洁一致[^4]。 需要注意的是,当使用 Vue CLI 构建工具链时,可能需要根据实际情况调整路径以及是否启用预处理器等功能选项。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值