vue用elementui写form表单时,在label里添加空格操作

要在密码两字中间添加空格，发现直接添加  是识别不了的，正确写法为：

代码：

 <el-form-item label="密 码:" :label-width="formLabelWidth" prop="password">
   <label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
   <el-input
    type="password"
    v-model="FormData.password"
    placeholder="请输入密码"
    autocomplete="off"
    show-password
   ></el-input>
   </el-form-item>

补充知识：vue + elementUI 给input输入框添加 字体小图标

基于vue框架，使用element-ui组件库写表单效果，需要添加字体小图标，效果如下：

1.只需要添加prefix-icon="iconfont icon-xxx"即可（头部插入）

//例如
<el-input
 prefix-icon="iconfont icon-sousuo"
 v-model="searchTableInfo"
 placeholder="请输入姓名"
 style="width:240px"
></el-input>

2.添加suffix-icon=“iconfont icon-xxx”（尾部添加）

//例如
<el-input
 suffix-icon="iconfont icon-sousuo"
 v-model="searchTableInfo"
 placeholder="请输入姓名"
 style="width:240px"
></el-input>

以上这篇vue用elementui写form表单时,在label里添加空格操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue ElementUI之Form表单验证遇到的问题

    Vue ElementUI之Form表单验证遇到的问题

    首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再

  • 详解element-ui中表单验证的三种方式

    最近项目中一直使用的element-ui作为前端框架,对于最常使用的表单验证,做出以下总结: 第一种常用方式:表单上加rules{object} <el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item label="姓名" prop="visi

  • vue+element-ui实现表格编辑的三种实现方式

    1.表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]. 页面结构代码: <el-table :data="tableData" tooltip-effect="dark" style=&

  • Vue+ElementUI实现表单动态渲染、可视化配置的方法

    动态渲染就是有一个异步的数据,大概长这样: { "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "

  • vue用elementui写form表单时,在label里添加空格操作

    要在密码两字中间添加空格,发现直接添加  是识别不了的,正确写法为: 代码: <el-form-item label="密 码:" :label-width="formLabelWidth" prop="password"> <label slot="label">密    码:</label> <el-input type="password" v-model=&

  • Vue模仿ElementUI的form表单实例代码

    实现要求 模仿 ElementUI 的表单,分为四层结构:index 组件.Form 表单组件.FormItem 表单项组件.Input 和 CheckBox 组件,具体分工如下: index 组件: 实现:分别引入 Form 组件.FormItem 组件.Input 组件,实现组装: Form 表单组件: 实现:预留插槽.管理数据模型 model.自定义校验规则 rules.全局校验方法 validate: FormItem 表单项组件: 实现:预留插槽.显示 label 标签.执行数据校验.

  • jquery提交form表单时禁止重复提交的方法

    复制代码 代码如下: $(document).ready(function() {  $('form').submit(function() {    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {      jQuery.data(this, "disabledOnSubmit", { submited: true });      $('input[type=submit], i

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,

  • 仿ElementUI实现一个Form表单的实现代码

    使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 完整项目地址:仿 ElementtUI 实现一个 Form 表单 一. 目标 仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Input 表单验证 我们先看一下 ElementUI 中 Form 表单的基本用法 <el-form :model="ruleForm" :rules="rules" ref="loginFo

  • vue封装form表单组件拒绝重复写form表单

    vue封装form表单组件拒绝重复写form表单

    目录 前言 核心思想: 实现重点: 表单双向绑定的方式有两种: 1.使用v-model进行双向绑定 2.使用v-model的语法糖 配置项 整体字段: 效果浏览 源码放送 1. baseForm组件 2. 父组件 3. 配置项 4. 添加或编辑 前言 在日常工作中,当需要处理的form表单很多时,我们没有必要一遍又一遍地重复写form表单,直接封装一个组件去处理就好.其实很早之前就有涉猎通过使用类似配置json方法写form表单的文章,虽然当时也没怎么认真看...我们前端组也是使用这种思想配置的

  • ASP.NET中Form表单不可以嵌套使用

    我非常确定在ASP 中是可以有多个form 表单的,以前常常这样干的,在后台分类管理页面中,把添加和修改放在同一个页面,这样就需要用到两个 form 表单进行提交服务器代码处理. 经过测试,在ASP.NET 也是可以一个页面有多个form 表单的,例如下面的代码: <form id="form1"></form><form id="form2"></form><form id="form3"&

  • SpringMVC处理Form表单实例

    SpringMVC处理Form表单实例

    Spring MVC 表单处理例子下面的例子说明了如何编写一个简单的基于 web 的应用程序,它利用了使用 Spring 的 Web MVC 框架的 HTML 表单. 一 测试项目搭建 (1)新建Java Web项目,并引入几个SpringMVC项目所需要的jar包,项目结构和所需要的jar包如下: ①web.xml: <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3

随机推荐