el-form-item 的label后面增加图标 el-tooltip
时间: 2024-10-24 20:04:01 浏览: 35
v-title:辅助文字显示(如“ el-tooltip”)
5星 · 资源好评率100%
`el-form-item` 是 Element UI 中的一个用于表单字段布局的组件,它通常包含一个 label 和一个输入元素。如果你想在 `el-form-item` 的 label 后面添加一个图标并同时提供额外的提示信息,你可以结合使用 `el-icon` 组件以及 `el-tooltip` 组件。这里是一个简单的示例:
```html
<template>
<el-form-item label="字段名称">
<el-input></el-input>
<el-tooltip :title="tooltipMessage" placement="top">
<el-icon type="information-circle"></el-icon>
</el-tooltip>
</el-form-item>
</template>
<script>
export default {
data() {
return {
tooltipMessage: '这是一个提示信息',
};
},
};
</script>
```
在这个例子中,我们首先在 label 后方添加了一个 `el-icon` 元素,并指定了图标类型为 "information-circle"。然后,我们创建了一个 `el-tooltip` 组件,设置其 title 属性为我们要显示的提示文本,placement 设置为 "top" 表示鼠标悬停在图标上时,提示框会出现在图标上方。
阅读全文