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

kingrome2009

于 2021-07-31 18:50:24 发布

阅读量1k

点赞数

分类专栏： vuejs2.0

本文链接：https://blog.csdn.net/kingrome2017/article/details/119279794

版权

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

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

动态遍历多层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"