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

最新推荐文章于 2024-05-02 16:11:40 发布

原创最新推荐文章于 2024-05-02 16:11:40 发布 · 1.6w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#vue #web #node.js

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue.js中使用Element UI库创建输入框，并在输入框后添加固定单位，如万公里和Kg。通过示例代码展示了在`el-input`组件中利用`slot`属性插入后缀单位，从而实现前端页面输入框的定制化显示。

vue-element

文章目录

vue-element
前言
一、怎么做？
- 1.示例代码
- 2.结果图片

前言

在我们设计前端页面时，总会使用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.结果图片

在这里插入图片描述