鼠标移入显示 el-form-item 的 lable el-tooltip

el-tooltip 是 Element UI 提供的一个组件，它可以在鼠标移入时显示提示信息。而 el-form-item 是 Element UI 中表单组件的一个封装，用于控制表单项的布局和样式。当需要在 el-form-item 的 label 标签上使用 el-tooltip 时，可以将 el-tooltip 组件放置在 label 标签内，设置 tooltip 的 content 属性为 label 标签上需要显示的提示信息。

示例代码如下：

<el-form-item label="用户名">
  <label slot="label">
    用户名
    <el-tooltip class="item" effect="dark" content="请输入您的用户名">
      <i class="el-icon-info"></i>
    </el-tooltip>
  </label>
  <el-input v-model="username"></el-input>
</el-form-item>

在这个示例中，我们在 el-form-item 的 label 标签上添加了一个 el-tooltip 组件，当鼠标移入时会显示提示信息“请输入您的用户名”。同时，我们使用了 Element UI 提供的 slot 功能，将 label 标签内部的内容插入到 el-form-item 的 label 区域中。

相关问题

Vue3 el-form-item怎么使用lable插槽

在Vue 3中，`el-form-item`是Element Plus框架的表单组件。要在`el-form-item`中使用label插槽，你可以直接使用`<template v-slot:label>`来定义你的label内容。下面是一个简单的例子：

<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <!-- 使用label插槽 -->
    <el-form-item prop="date1">
      <template v-slot:label>
        <label>活动时间</label>
      </template>
      <el-date-picker
        v-model="form.date1"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  name: '',
  region: '',
  date1: null,
});
</script>

在这个例子中，第一个`el-form-item`没有使用插槽，而是直接通过`label`属性设置label文本。第二个`el-form-item`使用了内置的`el-select`组件，也无需插槽。最后一个`el-form-item`使用了`v-slot:label`来自定义label的内容。你可以放置任何你想要的标签或者组件在`<template v-slot:label>`内部，从而实现高度的自定义。

使用.el-form-item__label未能修改lable的颜色

您可以通过以下方式修改 `.el-form-item__label` 标签的颜色：

1. 使用 CSS 样式表

.el-form-item__label {
  color: red;
}

2. 使用行内样式

<el-form-item label="Username">
  <template #label="{label}">
    <label style="color: red">{{ label }}</label>
  </template>
  <el-input v-model="form.username"></el-input>
</el-form-item>

请注意，如果您使用了自定义模板来呈现表单项目的标签，则需要使用 `#label` 插槽来访问标签的值。在上面的示例中，我们在模板中使用了 `label` 参数来访问标签的值，并使用行内样式将其颜色设置为红色。