Vue+ElementUI技巧分享：自定义表单项label的文字提示

在Vue中使用ElementUI时，可以通过自定义表单项（FormItem）的label来改变文字提示。以下是一个简单的示例：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <!-- 使用插槽自定义label -->
    <el-form-item>
      <template slot="label">
        <span>自定义提示：</span>
        <el-tooltip effect="dark" placement="top">
          <div slot="content">这里是详细的提示信息</div>
          <i class="el-icon-question"></i>
        </el-tooltip>
      </template>
      <el-input v-model="form.custom"></el-input>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        custom: ''
      }
    };
  }
};
</script>

在这个示例中，我们使用了<el-form-item>的slot="label"来自定义label的内容。我们添加了一个提示信息（使用el-tooltip组件），当用户悬停鼠标时，会显示出详细的提示信息。这种方式可以实现对label文字提示的灵活自定义。