element-vue 如何在文本框后添加文字

vue-element文章目录vue-element前言一、怎么做？1.示例代码2.结果图片前言在我们设计前端页面时，总会使用input输入框，当你要输入某些固定单位时，如何在输入框后固定单位呢？。一、怎么做？1.示例代码代码如下（示例）：<el-form :inline="true" :model="formInline" class="demo-form-inline"><e

George_huhu

15936人浏览 · 2020-12-08 14:44:19

George_huhu · 2020-12-08 14:44:19 发布

vue-element

前言

在我们设计前端页面时，总会使用input输入框，当你要输入某些固定单位时，如何在输入框后固定单位呢？。

一、怎么做？

1.示例代码

代码如下（示例）：

<el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="公里数" prop="cMile" >
          <el-input v-model="form.cMile" placeholder="公里数" ><i slot="suffix" style="font-style:normal;margin-right: 10px;">万公里</i></el-input>
        </el-form-item>
        <el-form-item label="载重" prop="cWeight">
          <el-input v-model="form.cWeight" placeholder="载重" ><i slot="suffix" style="font-style:normal;margin-right: 10px;">Kg</i></el-input>
        </el-form-item>
      </el-form>

2.结果图片

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^