需求如下:

问题分析:

因为用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. logstash将redis中的队列中数据发送到influxdb数据库中

    通过elk获取到的java jvm中ygc的时间如下: 现在讲ygc字段的值,发送到influxdb中 首先安装logstash的插件 logstash-output-influxdb 安装完成后,查 ...

  2. 数据挖掘--DBSCAN

    DBSCAN:Density Based Spatial Clustering of Applications with Noise Basic idea: If an object p is den ...

  3. centos7 下 通过终端 连接 蓝牙设备

    #首先确定硬件上有支持蓝牙的设备,插入蓝牙发射器.然后运行如下命令,就可以开到我们的蓝牙设备了: lsusb [root@localhost ~]# lsusbBus 002 Device 003: ...

  4. Nginx+Docker部署模式下 asp.net core 获取真实的客户端ip

    目录 Nginx+Docker部署模式下 asp.net core 获取真实的客户端ip 场景 过程还原 结论 参考资料 Nginx+Docker部署模式下 asp.net core 获取真实的客户端 ...

  5. [基础]斯坦福cs231n课程视频笔记(三) 训练神经网络

    目录 training Neural Network Activation function sigmoid ReLU Preprocessing Batch Normalization 权重初始化 ...

  6. 团队——Alpha2版本发布

    这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求的链接 团队名称 杨荣模杰和他的佶祥虎 这个作业的目标 发布并说明产品Alpha2版本 一.团队成员的学号姓名列表 学号 姓名 201731 ...

  7. 201871010135 张玉晶《面向对象程序设计(java)》第十六周学习总结

    第一部分:总结教材14.1-14.3知识内容 并发 • 线程的概念 • 中断线程 • 线程状态 • 多线程调度 • 线程同步 一.线程的概念 1. 程序是一段静态的代码,它是应用程序执行的蓝本. 2. ...

  8. python字典基本操作

    字典是python中五中基本数据类型之一,虽然它的赋值稍微麻烦点,但用起来真的是很方便.它用键值对来存放数据,所谓键值对,就是一个键,对应一个值,如果后面对前面的键再次赋值,第一次的值就被覆盖掉.像是 ...

  9. Linux安装docker(ubuntu16.04和centos7.4)

    ubuntu16.04版本 1.安装依赖 sudo apt-get install apt-transport-https ca-certificates software-properties-co ...

  10. linux中以.d结尾的目录

    一般为了保持对原有配置方式的兼容,而增加的.d结尾目录. 如: /etc/X11/xorg.conf 这原本是个文件,现在也有了一个/etc/X11/xorg.conf.d这样的目录,显卡驱动的相关设 ...