Element之动态增加表单中嵌套下拉菜单踩坑

最新推荐文章于 2024-07-20 19:15:34 发布

y_yyyym

最新推荐文章于 2024-07-20 19:15:34 发布

阅读量3.5k

点赞数

分类专栏：前端文章标签： Element Vue JavaScript HTML

本文链接：https://blog.csdn.net/y_yyyym/article/details/103186039

版权

在使用Element UI时，遇到动态增减表单中嵌套下拉菜单的问题。由于command事件无法接收额外参数，导致无法针对性地控制每个下拉框。通过利用Vue的$event属性，将循环索引传入事件，实现对特定下拉框菜单项的控制，解决了这一难题。

摘要由CSDN通过智能技术生成

使用ELement时动态增减表单遇到的一个小小坑，当在动态改变的表单项中内嵌了一层下拉菜单dropdown时，我需要通过dropdown的command事件来控制显示dropdown-menu中的dropdown-item，但是官方文档中的command事件不支持接受除command属性之外的参数，那么便无法特定的修改动态增加的表单项中的某一个表单项中的下拉框，此路不通，灵机一动，想起Vue自带的$event属性，可以给事件传入一些额外的参数，废话不多说，上代码

<div class="export_main">
  <el-form :model="exportAddressConfig" :inline="true">
    <el-form-item
      v-for="(item, index) in exportAddressConfig.address"
      :key="item.key"
      :label="'导出地址' + (index + 1) + '：'"
      :prop="'address.' + index + '.value'"
      :rules="{required: true, message: '地址不能为空', trigger: 'blur'}"
      style="display: block;"
    >
      <el-dropdown trigger="click" @command="