elementui el-form中el-form-item自定义label

2023-10-27

问题描述:

在开发中有时候对表单的label需要加入图标,如下图所示:

实现方法,将自定义代码块中加入属性slot=“label”即可;

下面是代码实现:(仅提供自定义label行,方便大家使用;)

<el-form-item>
    <span slot="label">
      <i class="el-icon-edit"></i>
      活动名称
    </span>
    <el-input v-model="sizeForm.name"></el-input>
  </el-form-item>

 下面为上图完整版实例:

<el-form ref="form" :model="sizeForm" label-width="100px" size="mini">
  <el-form-item>
    <span slot="label">
      <i class="el-icon-edit"></i>
      活动名称
    </span>
    <el-input v-model="sizeForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="sizeForm.type">
      <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
      <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
      <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="sizeForm.resource" size="medium">
      <el-radio border label="线上品牌商赞助"></el-radio>
      <el-radio border label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

js部分省略,需要的可自行补充完整;

vue element-ui 中的 select remote-method 函数中自定义传参icon-default.png?t=LA92https://blog.csdn.net/qq_38909255/article/details/121163730

element-ui tooltip修改背景颜色和箭头颜色icon-default.png?t=LA92https://blog.csdn.net/qq_38909255/article/details/121820696

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

elementui el-form中el-form-item自定义label 的相关文章

  • Angular - 如何从 DOM 中删除我使用过 $compile 的元素?

    我需要的是两个 ng views 的功能 因为我不能 我想更改某些内容的innerHTML 并编译它 我遇到的问题是 当我再次更改内容时 我可以编译 但是 Angular 是否会自行删除绑定 或者我必须手动执行此操作 如果是这样 怎么办 编
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • 渲染货币和符号并与来自不同单元格的数据相结合

    我正在使用最新的 jQuery DataTables v1 10 7 我正在尝试将数字解析为以下格式 239 90 USD 我可以使用此命令使货币正常工作 columns data Price render fn dataTable ren
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 使用 JavaScript 禁用第三方 cookie

    我正在努力根据所有在欧盟运营的公司的数据保护规则实施新的 Cookie 政策合规性 根据该规则 用户在使用任何网站时必须能够拒绝 接受除必需的 Cookie 之外的所有内容 在我客户的网站中 我可以看到正在存储以下第三方 cookie ga
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 日期出现奇怪的错误,“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • Excel批量创建带超链接的工作表目录

    工作中总会遇到包含多个工作表的工作簿 很多人都在想这时候如果能有一个目录 不但能显示出所有的工作表名称 还能够链接跳转到指定的工作表 该有多好呀 于是 一些勤奋的人们就开始行动了 他们手动创建超链接指向各个工作表 但当工作表数量很多时 手动
  • 2023华为od机试 Python【拔河比赛】

    前言 本题使用Python解答 如果需要Java代码 请参考以下链接 点我 题目 我们需要为拔河比赛挑选人选 挑选规则如下 1首先按身高排序 然后按体重排序 2 选出10个最合适的人选 输入是一个数组 数组存储的是所有人员的身高 体重信息
  • vue项目的简体繁体切换

    vue项目的简体繁体切换 在项目中有这样的一个需求 需要对APP内的字体进行简体和繁体的切换 一开始在项目中下载引入了vue i18n的语言包 但是有个缺点就是i18n语言包不能对接口返回的字体进行转换 还有的就是只能实现部分字体的转换 工
  • AcWing 826. 单链表

    题目 实现一个单链表 链表初始为空 支持三种操作 1 向链表头插入一个数 2 删除第k个插入的数后面的数 3 在第k个插入的数后插入一个数 现在要对该链表进行M次操作 进行完所有操作后 从头到尾输出整个链表 注意 题目中第k个插入的数并不是
  • Spring中@component的使用

    Spring中 component的使用 component是spring中的一个注解 它的作用就是实现bean的注入 在探究 component前先了解一下注解 何为注解 注解本质上就是一个类 开发中我们可以使用注解 取代 xml配置文件
  • [项目管理-14]:大规模组织的项目管理办公室PMO

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 目录 第1章 什么是PMO 1 1 PMO定义 1 2 PMO的由来 1 3 PMP的职责 第2章 PMO的组织架构 1 1 架构 1 2
  • Python 之 元组小结

    字典是Python中唯一内建的映射类型 字典中的值并没有特殊的顺序 键可以是数字 字符串甚至是元组 dic 1 a 2 b 3 c dict 创建字典 gt gt gt dic 1 a 2 b 3 c gt gt gt dic dict d
  • HAL库函数中的HAL_I2C_Mem_Write /HAL_I2C_Mem_Read中的DevAddress解析

    在HAL库函数中的HAL I2C Mem Write HAL I2C Mem Read两个函数的作用就是玩IIC设备中写入 读取多个直接的数据 函数原型 HAL StatusTypeDef HAL I2C Mem Read I2C Hand
  • java---lambda函数

    背景 lambda 表达式是一个可传递的代码块 可以在以后执行一次或多次 就类似于sort arrs comparator 函数在排列结束之前会不停调用comparator代码块 在java中传递一个代码段并不容易 不能直接传递代码段 Ja
  • LeetCode常见经典算法——KMP算法

    常见经典算法 KMP算法 参考 https www bilibili com video BV1jb411V78H from search seid 6567338116212695926 关键字 有效回溯 最大公共前后缀长度 样本串的ne
  • 西门子200PLC软件的安装和使用

    西门子200PLC软件 v4 0 STEP 7 MicroWIN SP6 的安装和使用 文章目录 目录 文章目录 前言 二 安装时可能会出现的问题 1 无法进行安装并出现英文提示 2 解决方法 三 通信问题 PC PG设置无PC PPI C
  • makefile基础及常用规则

    什么是makefile 或许很多Windows的程序员都不知道这个东西 因为那些Windows的IDE都为你做了这个工作 但我觉得要作一个好的和professional的程序员 makefile还是要懂 特别在Unix下的软件编译 你就不能
  • HTML炫酷文字流

    看到了黑客帝国里源代码 也用HTML写了一个 css padding 0 margin 0 html overflow hidden Html部分
  • Nodejs实现给手机发送短信验证码用于登录功能(免费短信)

    我们开发的应用通常需要通过手机短信验证码验证进行登录 方便了那些容易忘记密码的用户 同时也降低了是密码被盗的风险性 文章目录 1 注册容联云通信账号 免费 2 nodejs发送请求即可发送短信验证码 1 注册容联云通信账号 免费 1 点击这
  • HTTP 304状态码的详细讲解

    HTTP 304状态码的详细讲解 304状态码或许不应该认为是一种错误 而是对客户端有缓存情况下服务端的一种响应 整个请求响应过程如下 客户端在请求一个文件的时候 发现自己缓存的文件有 Last Modified 那么在请求中会包含 If
  • Python实现动态画图并生成gif图像(matplotlib)

    通过Matplotlib中的animation可以方便的生成动态的画图并保存到gif文件 示例代码如下 import numpy as np import matplotlib pyplot as plt import matplotlib
  • 2021-11-07

    Your CLT does not support macOS 11 5 It is either outdated or was modified Please update your CLT or delete it if no upd
  • python数组变整数

    对于array格式的数组来说 numpy提供了一个方便的函数 np trunc arr 来执行取整操作 A np array 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 B np trunc A print B 1 2
  • 打印vector容器的模板函数

    今天在测试vector的时候想写一个vector的打印函数 为了测试不同数据类型的vector 肯定是编一个模板函数 然后就报错 直到看了 理解typename的两个含义 才明白哪里出错 下面是最后正确的代码 include
  • elementui el-form中el-form-item自定义label

    问题描述 在开发中有时候对表单的label需要加入图标 如下图所示 实现方法 将自定义代码块中加入属性slot label 即可 下面是代码实现 仅提供自定义label行 方便大家使用