elementui 表单 el-form 的那些使用小技巧

原创已于 2022-04-08 16:06:30 修改 · 5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2022-04-08 15:32:16 首次发布

element 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue的el-form-item中使用自定义slot标签添加图标，并通过native属性绑定点击事件。展示了如何移除原有label并用图标和文字组合形成新的交互形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. el-form-item的label旁加icon

去掉原先 el-form-item 上的 label，使用 slot= label 自定义即可。

<el-form-item prop="任务名称" required>
  <span slot="label">
    <i class="el-icon-connection"></i>
    <span style="color: #46a0fc;"> 任务名称 </span>
  </span>
</el-form-item>

2. 为 el-form-item 添加点击事件

给 Vue 组件绑定事件的时候，要加上native，否则不起作用，如果是普通的html元素，就不需要。

<el-form-item @click.native="showRelatedDemandModal">
  <span slot="label">
    <i class="el-icon-connection"></i>
    <span style="color: #46a0fc">
      任务名称
    </span>
  </span>
</el-form-item>