el-input-number,增加清空icon按钮,输入值居左(左对齐)、去除控制按钮

:controls="false",不使用控制按钮;

html 复制代码
      <div>
        <span class="label">金额</span>
        <div
          style="width: 100%;border: solid 1px rgba(0, 0, 0, 0.1); border-radius: 4px; display: flex;align-items: center;"
        >
          <el-input-number
            v-model.trim="queryParams.amount"
            placeholder="请输入交易金额"
            :controls="false"
            size="small"
            @keyup.enter.native="handleQuery"
          />
          <i
            class="el-icon-circle-close"
            style="margin: 5px;color: rgba(0, 0, 0, 0.3);"
            @click="clearInputNumber('amount')"
          ></i>
        </div>
      </div>

清空方法:

javascript 复制代码
    clearInputNumber (property) {
      // console.log("🚀 ~ clearInputNumber ~ property:", property)
      this.queryParams[property] = undefined
    },

css样式:

css 复制代码
<style lang="scss" scoped>
::v-deep .el-input-number.is-without-controls .el-input__inner{
  text-align: left !important; // 左对齐
  border: none;
}
</style>
相关推荐
不可求~7 小时前
多模型路由怎么落地:把任务分流写进项目的最小实现
java·前端·数据库
AC赳赳老秦10 小时前
公开图片 OCR 数据提取:OpenClaw 合规采集公开信息图,识别文字与表格并转化为结构化数据
java·大数据·前端·数据库·python·php·openclaw
谢慧琼10 小时前
2026零基础做企业网站,低成本搭建官方网站
服务器·前端·javascript
weixin_4316004411 小时前
前端数据埋点(1):一次点击如何变成一条埋点
前端·js·数据埋点
IT_陈寒11 小时前
Python线程池吞了异常还不告诉我,这谁顶得住啊
前端·人工智能·后端
计算机魔术师12 小时前
同样是AI辅助建造,为什么有的游戏三个月就烂尾了?
前端
用户9210802628612 小时前
0. 做 Agent 产品,前端 AI 组件框架怎么选?
前端
拾年27513 小时前
React Hooks 进阶篇:useMemo / useCallback / useReducer / useImperativeHandle,用「算账 +
前端·javascript·react.js
Jackson__13 小时前
面试官:如何在老项目中使用新框架,并实现通信?
前端·javascript·面试