需求如下:

问题分析:

因为用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. 分布式Redis深度历险-Sentinel

    上一篇介绍了Redis的主从服务器之间是如何同步数据的.试想下,在一主一从或一主多从的结构下,如果主服务器挂了,整个集群就不可用了,单点问题并没有解决.Redis使用Sentinel解决该问题,保障集 ...

  2. Python【day 11】迭代器

    迭代器-用 1.迭代器的概念 1.可迭代对象-iterable str.list.tuple.dict.set.open().range() 2.可迭代对象的概念: 其数据类型的执行方法中含有__it ...

  3. Oh-My-Zsh的配置与使用

    什么是Shell? 相对于内核来说,Shell是Linux/Unix的一个外壳,它负责外界与Linux内核的交互,接收用户或其他应用程序的命令,然后把这些命令转化成内核能理解的语言,传给内核,内核是真 ...

  4. PMP备考-第二章-项目运行环境与项目经理

    组织系统的三大因素:组织治理框架,管理要素和组织结构 组织治理和项目治理 组织治理 :组织中的重要决策制定框架,谁有权在什么时候用什么发放做出并推行什么重要决策. 项目治理 :组织为项目建立的高级别的 ...

  5. 【原创】Airflow调用talend

    核心原理 因为talend job build出来是一个可直接运行的程序,可以通过shell命名启动job进程,因此可以使用airflow的bashoperator调用生成好的talend job包里 ...

  6. Centos7安装dubbo与zookeeper服务配置

    目录 环境: 第一步:安装jdk,并且配置环境变量 1.解压jdk: 2.配置环境变量: 3.保存并使文件立即生效: 4.立即重启虚拟机,进行下面的安装 第二步:安装注册中心zookeeper 1.解 ...

  7. Centos7部署ejforum论坛(Java+tomcat+mysql)

    前面搭建Java环境和tomcat环境. 下面进行实战,搭建ejforum论坛 ejforum论坛源码:https://www.lanzous.com/i45rcoh Centos7安装MySQL数据 ...

  8. kolla-ansible部署openstack allinone单节点

    环境准备 2 network interfaces 8GB main memory 40GB disk space 1.修改hostname hostnamectl set-hostname koll ...

  9. JS高阶---闭包缺点(内存溢出与泄露)

    [大纲] [主体] (1)闭包优缺点 .延长局部变量的生命周期2.外部访问函数内部变量 闭包的优点同时也是它的缺点,就是 (2)解决方案 .能不用闭包就不用(很难做到,因为应用较多) .及时释放--- ...

  10. shell-基础2

    条件表达式 文件判断 文件测试操作符 常用文件测试操作符 说明 -d文件,d的全拼为directory 文件存在且为目录则为真,即测试表达式成立 -f文件,f的全拼为file 文件存在且为普通文件则为 ...