需求如下:

问题分析:

因为用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. putty连接centos慢

    用的vmware下的centos minimal镜像,开发时,用putty连接很慢,一分多钟, 解决方案: 禁用GSSAPI认证有两个方式:客户端和服务端 直接配置你ssh客户端的文件/etc/ssh ...

  2. 来点高逼格的,使用前端Sendmessage实现SSO

    关于什么叫SSO(单点登录),这个概念具体的信息我就不详述了,网上一搜一大把,总的来说,它是一种可以控制各个独立的系统经过它的授权后, 可以用同一个帐号体系登录不同的系统,达到一处登录,多处使用的效果 ...

  3. Dikstra 堆优化板子

    #include <bits/stdc++.h> #define MAXN 10005 using namespace std; typedef long long LL; vector& ...

  4. Spring Cloud Eureka详细说明

    之前学习了如何配置Eureka注册中心.消费者等,关于更详细的一些常用的配置在这里说明. 1.注册中心的自我保护模式 在我们调试Eureka的注册中心时,访问注册中心页面,常常会看见以下提示. 该提示 ...

  5. 08、启动过程+at+crond+anacron

    [root@li ~]# 加电--BIOS (basic input output system)--以什么设备来启动--/dev/sda -- mbr -- grub.conf --vmlinux ...

  6. Mysql 数据库部署(解压免安装)

    下载压缩包,解压. 在根目录下添加my.ini, 复制一下内容,保存. [mysqld] skip-grant-tables #绑定IPv4和3306端口 bind-address = 0.0.0.0 ...

  7. Rust中的Trait

    类似接口,但和php中的trait又有点不一样. pub trait Summary { fn summarize(&self) -> String; } pub struct NewA ...

  8. 【洛谷P3749】[六省联考2017]寿司餐厅(网络流)

    洛谷 题意: 给出\(n\)份寿司,现可以选取任意多次连续区间内的寿司,对于区间\([l,r]\),那么贡献为\(\sum_{i=l}^r \sum_{j=i}^rd_{i,j}\)(对于相同的\(d ...

  9. flask 基础2

    一.装饰器的坑 在使用装饰器函数时候,当一个装饰器装饰多个函数的时候,会由于内存地址相同时发生报错,因为装饰的都是一个函数 所以就需要引入 import functools  重新定义每一个函数的名称 ...

  10. 05-人脸识别-FaceNet的感性认识

    源码链接:https://github.com/davidsandberg/facenet 论文链接:https://arxiv.org/pdf/1503.03832.pdf B站大神视频解读论文:h ...