vue FormItem 动态遍历多层prop绑定编辑回填信息后新增删除操作页面不渲染

最新推荐文章于 2024-11-26 10:52:47 发布

原创

最新推荐文章于 2024-11-26 10:52:47 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

博客介绍了在Vue中如何处理FormItem的动态遍历，特别是针对多层prop的绑定。内容涉及到根据groupConditionList进行绑定，并在编辑回填信息后实现新增和删除操作。文章提到了数组更新检测的问题，指出Vue提供了如push、pop等变异方法，这些方法会触发视图更新。

动态遍历多层prop绑定，主要根据groupConditionList绑定

:prop="`groupConditionList[${index}].value[${inx}]`"

<div v-else-if="typeNumber === 3">
  <FormItem label="SDMK服务" prop="sdmkUrl" class="setWidth">
    <Input
      type="text"
      v-model="formValidate.sdmkUrl"
      placeholder="请输入SDMK服务地址"
      :disabled='Boolean($route.query.type)'
    ></Input>
  </FormItem>
  <p class="customerLine"></p>
  <h2 class="customerH2">归因模型配置</h2>
  <FormItem label="归因模型" prop="lastModelList" class="setWidth">
    <Select
      v-model="formValidate.lastModelList"
      placeholder="请选择归因模型"
      multiple
      :disabled='Boolean($route.query.type)'
      :loading="loading_lastModelList"
    >
      <Option
        v-for="item in lastModelListdataArr"
        :key="item.id"
        :value="item.id"
        >{
  
  { item.name }}
        </Option
      >
    </Select>
  </FormItem>
  <p class="customerLine"></p>
  <h2 class="customerH2">分组维度配置</h2>
  <div
    v-for="(item, index) in formValidate.groupConditionList"
    :key