需求如下:

问题分析:

因为用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. 我的Xamarin开发配置

    我用的的是VS2019 步骤1:打开VS→工具→Android→Android SDK 管理器 安装平台的 Android 9.0-pie下的Android SDK Platform 28 和 Goo ...

  2. C#通过PInvoke调用c++函数的备忘录

    目前知道的情况被调用的C/C++函数只能是全局函数 不能调用类中的成员方法 被调用的C函数必须使用extern “C“包含,保证采用的导出函数名生成规则和.NET一致 函数调用约定通常使用WINAPI ...

  3. 一张图搞定 .NET Framework, .NET Core 和 .NET Standard 的区别

    最近开始研究.NET Core,有张图一看就能明白他们之前的关系. 上图己经能够说明.NET Framework和.NET Core其实是实现了 .NET Standard相关的东西,或者说Frame ...

  4. python常用库简单使用( PyPDF2 )

    PyPDF2学习 1  这个模块的名字对大小写是敏感的,所以,确保y是小写的,其他字母都是大写的

  5. jenkins19年最新最管用的汉化

    今天准备学学jenkins ,官方下载了一个最新版本,发现是英文版,网上找个许多汉化方式,几乎都是一种,下载插件 :Locale plugin ....很尴尬,下载完了还是没有汉化 ,是不是jenki ...

  6. SimpleTagSupport 获取request、session

    开发jsp系统时,我们经常会用到tag来写java的逻辑代码,一般会继承两个类,一个是SimpleTagSupport,另一个是TagSupport,由于TagSupport书写配置比较复杂(我个人才 ...

  7. Fundebug后端Node.js插件更新至0.2.0,支持监控Express慢请求

    摘要: 性能问题也是BUG,也需要监控. Fundebug后端Node.js异常监控服务 Fundebug是专业的应用异常监控平台,我们Node.js插件fundebug-nodejs可以提供全方位的 ...

  8. JMETER 用户变量作用域

    在编写JMETER 脚本时,我们会使用到变量,变量的作用域是线程. 我们通过下面的脚本验证一下变量的返回是线程. 1. 我们先定义一个amount的流程变量. 2.线程组使用三个线程 3.在线程组中添 ...

  9. 4、Work-Queue

    Work Queues using the Java Client In the first tutorial we wrote programs to send and receive messag ...

  10. 201871010114-李岩松《面向对象程序设计(java)》第十五周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...