element-ui中el-form-item的label自定义

vue学习, 遇到的问题集合 本文总阅读量次

想要同时保留label特性可使用官方留的插槽slot="label"对label进行自定义

问题描述

  • 原本的功能有对el-form-item设置prop校验，所以label前会有红色星号
  • 现在要给label后紧跟位置加一个el-tooltip来显示提示，如果直接加没办法紧跟着，改样式可以但很麻烦

解决方法

  • 使用官方提供的slot="label"插槽

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// ...
<el-form-item
  prop="orderTypeCode"
>
<template slot="label">
  原本的label内容放在这
  <el-tooltip 
    content="新加的提示文字" 
    placement="top">
    <svg-icon icon-class="问号" />
  </el-tooltip>
</template>
  <el-select
    v-model="form.orderTypeCode"
    size="mini"
  >
    <el-option
      v-for="item in xxx"
      :key="item.code"
      :label="item.nameZh"
      :value="item.code"
    />
  </el-select>
</el-form-item>

参考

vue学习, 遇到的问题集合