Element UI的选择器双重循环问题

最新推荐文章于 2024-05-14 22:33:52 发布

kai.先生

最新推荐文章于 2024-05-14 22:33:52 发布

阅读量694

点赞数

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/kaieew12345/article/details/125840705

版权

本文介绍了如何使用 Vue.js 动态生成下拉选择器，并详细阐述了如何根据给定数据实现回显功能。通过双重 for 循环处理，确保了选择器的正确绑定和数据同步更新。

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

1.后端传入数组对象，动态生成选择器

<div v-for="(item, index) in downList" :key="item.id">
        <el-form-item :label="item.parameter_name">
          <el-select
            v-model="downList[index].selectedKey"
            placeholder="请选择"
            @change="
              val => {
                changeSelect(val, item.id, index)
              }
            "
          >
            <el-option v-for="thing in item.xj_list" :key="thing.id" :label="thing.parameter_name" :value="thing.id"> </el-option>
          </el-select>
        </el-form-item>
      </div>

2.动态选择器的数据回显，利用双重for循环赋值

if (this.downList.length > 0) {
                let realList = data.tfPptLibrary.parameterReal
                for (let i = 0; i < this.downList.length; i++) {
                  for (let k = 0; k < realList.length; k++) {
                    if (this.downList[i].id === realList[k].parameterKey) {
                      this.downList[i].selectedKey = realList[k].parameterValue
                    }
                  }
                }
              }
            }