el-form label过长时显示省略号 鼠标悬浮使用el-tooltip展示完整内容

在Element UI中，可以使用el-tooltip组件来实现当el-form的label过长时显示省略号，并在鼠标悬浮时展示完整内容。以下是一个简单的实现示例：

<template>
  <el-form label-width="120px">
    <el-form-item>
      <el-tooltip :content="item.label" placement="top" effect="dark">
        <span slot="reference" class="form-item-label">{{ item.label }}</span>
      </el-tooltip>
      <el-input v-model="item.value"></el-input>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      item: {
        label: '这是一个很长很长的标签，需要显示省略号，鼠标悬浮时显示完整内容',
        value: ''
      }
    };
  }
};
</script>
 
<style>
.form-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

在这个示例中，.form-item-label 类定义了如何处理过长的文本，通过设置white-space为nowrap，overflow为hidden，以及text-overflow为ellipsis，实现了省略号的效果。el-tooltip组件则负责在鼠标悬浮时展示完整的标签内容。