需求如下:

问题分析:

因为用elementui组件 el-input 相当于块级元素,后面的单位<span>分</span>会被挤下去,无法在同一水平。

解决方法:

不用它的组件,自己写个原生的,用组件的class名,替换el-input__inner 为 el-input__myinner

  <el-form-item label="处理耗时">
       <div class="el-form-item__content"></div>
       <input type="text" class='el-input__myinner' v-model="form.take_time" autocomplete='off'>
      <span>分</span>
 </el-form-item>

在F12模式下,可以查看 el-input__inner   的样式,将样式复制下来,修改一下就可。

.el-input__myinner{
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            ;
             15px;
            );
            );
            margin-right:10px;
          }

vue需求表单有单位(时分秒千克等等)的更多相关文章

  1. vue的表单编辑删除,保存取消功能

    过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了.(心将塞未塞,欲塞未满) VUE ...

  2. Vue.js表单校验;动画指令;避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  3. chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

    参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...

  4. 12.Vue.js 表单

    这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...

  5. vue基础——表单输入绑定

    一.基础用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...

  6. vue的表单的简单介绍 input radio checkbox等表单特性

    在vue中我们可以通过v-model来为表单元素实现双向绑定 1:v-model指令 数据的双向绑定 双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模 ...

  7. vue基础---表单输入绑定

    [一]基础用法 用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...

  8. Vue (表单、斗篷、条件、循环指令,分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数)

    表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  9. vue+element 表单封成组件(1)

    作为一名刚接触vue不到一个月的菜鸟,思想还没有从操作DOM转变为数据驱动,看vue的代码处处别扭.组里为了让我熟悉vue交给了我一个将element 表单封装成组件的练手任务.由于开发过程中遇到的表 ...

随机推荐

  1. C# 学习笔记 多态(一)虚方法

    在面对对象编程中,类的三大特性分别为封装,继承,多态.其中多态的具体实现,依赖于三个方法,也就是虚方法,抽象类和接口. 多态的具体作用是什么呢?或者说多态的存在有什么意义呢?多态的存在有效的降低了程序 ...

  2. java servlet 初学笔记

    1. 页面HTML标签中的中文乱码 在 doGet 或者 doPost 等方法内的第一行添加: response.setCharacterEncoding("gbk"); 2. 避 ...

  3. C# - VS2019 WinFrm程序调用ZXing.NET实现条码、二维码和带有Logo的二维码的识别

    前言 C# WinFrm程序调用ZXing.NET实现条码.二维码和带有Logo的二维码的识别. ZXing.NET导入 GitHub开源库 ZXing.NET开源库githib下载地址:https: ...

  4. Object.defineProperty-vuejs数据响应基石

    https://www.jianshu.com/p/07ba2b0c8fca https://juejin.im/post/5b99215d5188255c520cfe22 vuejs数据双向绑定地核 ...

  5. 解决maven项目中web.xml is missing and <failOnMissingWebXml> is set to true

    web.xml is missing and <failOnMissingWebXml> is set to true 是因为项目中没有web.xml文件, 步骤如下:

  6. Linux 信号量之Posix有名字的信号量

    信号量(semaphore),也和互斥锁一样提供了线程间或者进程间的同步功能. 信号量有三种: Posix有名字的信号量 Posix基于内存的信号量 System V信号量 信号量比互斥锁高级,互斥锁 ...

  7. django-manage.py参数

    cleanup--从数据库中删除旧数据 compilemessages--将.po文件编译为.mo以与gettext一起使用 createcachetable--为SQL缓存后端创建表 create ...

  8. JAVA的toString方法的一个小例子

    Object是一个抽象类,他有很有方法,其中的toString方法是我们常见的一个方法,我们可以看这段代码 package com.com.day1; public class ToStringTes ...

  9. React 受控组件和非受控组件

    需求用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange 点击按钮 获取密码 只要绑定了点击事件 就可以获取值 通过 let usercont=event. ...

  10. 使用jmeter进行压力测试及如何添加负载机

    Jmeter是一款简单灵活且强大的性能测试工具,同时也可以做接口测试. 由于初识jmeter,今天来记录一下如何对一个web进行一个简单的压力测试. 1.首先在测试计划里面添加一个线程组,然后再其下面 ...