vue v-for循环

默认是全部展开，当点击每个表格的下拉图标，就会显示或隐藏，刚开始做的时候就通过一个变量进行控制，导致点击一个下拉图标就会控制所有有的表格下拉，所以应该是给每个表格对应的集合中加一条属性来判断当前v-for循环中的index值是否为true或false

 <template v-for="(item,index) in (this.model)">
        <div :key="index" class="box-body">
          <div class=" info-box-mag">
            <div class="seachTit">
              {{ $t("views.allApplication_list.update_time") }}:
              {{ item.dtAction|formatDateTime }}
              <div class="pull-right mt5">
                <i
                  :class="[searchFormShow02[index]? 'fas show-form fa-chevron-up pull-right'
                    :'fas show-form fa-chevron-down pull-right']"
                  @click="changeShow(index)"
                />
              </div>
            </div>
            <transition name="slide-fade">
              <div v-show="searchFormShow02[index]" :key="index">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table">
                  <tbody>
                    <tr>
                      <th class="p_th">{{ $t("views.allApplication_list.application_jinglu") }}</th>
                      <td>{{ item.txtApprovalPath }}</td>
                    </tr>
                    <tr>
                      <th class="p_th">{{ $t("views.allApplication_list.update_user") }}</th>
                      <td>{{ item.nmActionUser }}</td>
                    </tr>
                    <tr>
                      <th class="p_th">{{ $t("views.allApplication_list.update_text") }}</th>
                      <td v-if="item.typeAction==1">{{ $t("views.allApplication_list.saveButton") }}</td>
                      <td v-else-if="item.typeAction==2">{{ $t("views.allApplication_list.updateButton") }}</td>
                      <td v-else-if="item.typeAction==3">{{ $t("views.allApplication_list.application_confirm") }}</td>
                      <td v-else-if="item.typeAction==4">{{ $t("views.allApplication.typeStatus4") }}</td>
                      <td v-else-if="item.typeAction==5">{{ $t("views.allApplication.typeStatus5") }}</td>
                      <td v-else-if="item.typeAction==6">{{ $t("views.allApplication.typeStatus6") }}</td>
                      <td v-else>{{ $t("views.allApplication.typeStatus7") }}</td>
                    </tr>
                  </tbody>
                </table>

              </div>
            </transition>
          </div>
        </div>

      </template>

存储当前index下的true/false值
data() {
    return {
      searchFormShow02: {
        "0111": ["true"]
      }

    };
  },

 methods: {
    init(val) {
      for (let i = 0; i < val.length; i++) {
        this.$set(this.searchFormShow02, i, true);
      }
      console.log(this.searchFormShow02);
    },
    changeShow(index) {
      if (this.searchFormShow02[index] === true) {
        this.$set(this.searchFormShow02, index, false);
      } else {
        this.$set(this.searchFormShow02, index, true);
      }

      // console.log(this.searchFormShow02);
    }
  }

先获取到后端传来的数组，然后循环遍历数组长度，新建一个searchFormShow02变量，存储index值，全部赋值为true

然后点击每一行的下拉图标，进入到changeShow(index)方法，改变searchFormShow02[index]的属性，通过this.$set改变对象的值，然后渲染页面