element el-form-item 加 icon
时间: 2024-09-12 19:13:36 浏览: 39
element中el-container容器与div布局区分详解
在Element UI的表单组件`el-form-item`中添加图标,你可以通过将`<el-icon>`标签作为`label`属性的一部分嵌套在`<el-form-item>`里来实现。例如:
```html
<el-form-item label="用户名 <el-icon type="user"></el-icon>">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
```
这里,`type="user"`是一个自定义图标类型,`user`是Element UI内置的一些图标类型之一,还可以使用其他的图标类型,如`info`, `edit`, `close`等。
如果你需要动态加载图标,可以利用v-bind绑定`type`属性到数据中:
```html
<template>
<el-form-item :label="'用户名 ' + iconName">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
},
iconName: 'user', // 可以从data或某个计算属性中获取动态值
};
}
}
</script>
```
阅读全文