el-form表单label前后分别添加icon提示这样做

半个程序媛阿潘

已于 2022-07-08 18:19:30 修改

阅读量4.9k

点赞数 9

分类专栏： label提示icon 文章标签： html javascript 前端 css

于 2022-06-30 14:59:37 首次发布

本文链接：https://blog.csdn.net/weixin_53589158/article/details/125540257

版权

label提示icon 专栏收录该内容

1 篇文章

订阅专栏

本文展示了如何在前端开发中为label添加图标提示，包括在label后添加带有气泡提示的问号图标以及在label前使用tooltip显示提示信息。通过Vue组件和相关库，详细解释了代码实现过程，确保图标提示在不同场景下正确显示，同时提供了处理label换行和设置宽度的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为label添加icon提示怎么样做？？

1.label之后添加icon提示，效果如下图所示：

话不多说上代码

<el-form-item label="周期排课" prop="weekDay" v-if="radio===1">
   <span slot="label">
      <span>
         <span>周期排课
             <el-popover placement="top" width="200" trigger="hover" content="排课时间须在占场时段内，否则无法成功排课">
                <i slot="reference" class="el-icon-question"></i>
             </el-popover>
         </span>
      </span>
   </span>
  <el-checkbox-group v-model="form.weekDay" @change="changeWeekTime">
     <el-checkbox v-for="item in weekList" :key="item.value" :label="item.value" :value="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>
</el-form-item>

此外，要是label后面有冒号，只需要这样做：

在文字外层span加上冒号即可

2.给label之前添加icon提示，

同样话不多说，直接上效果代码：

<el-form-item label="排课时间" required v-show="radio===0">
     <span slot="label">
           <el-tooltip content="排课时间须在占场时段内，否则无法成功排课" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>排课时间
      </span>
      <el-date-picker
           key="1"
           v-model="form.time1"
           type="date"
           value-format="yyyy-MM-dd"
           format="yyyy-MM-dd"
           placeholder="请选择排课日期"
           :picker-options="pickerOptions"
       >
       </el-date-picker>
       <span style="width: 20px;display:inline-block"></span>
       <el-time-picker
            is-range
            v-model="form.paiTime"
            range-separator="-"
            start-placeholder="排课开始时间"
            end-placeholder="排课结束时间"
            value-format="HH:mm"
            format="HH:mm"
        >
        </el-time-picker>
</el-form-item>

注意，有的小伙伴的label可能会换行，切记设置label宽度时要宽度要够