vue中v-for遍历数组循环生成的控件使用v-if动态判断另一个数组中的值

    <el-dialog
      title="title"
      :visible.sync="dialogVisible"
      width="600"
      >
      <div v-for="(item, index) in studyConditions" style="margin-top:20px;">
        <li>
          {{item.date}} : {{item.time}}
        </li>
        <li>
          <span style="display:none">
            {{flush}}
          </span>
          <el-button v-if="showArray[index]" @click="wrapSc(index)">折  叠</el-button>
          <el-button v-else @click="openSc(index)">打  开</el-button>
        </li>
        <studyCondition v-show="showArray[index]" :studyCondition="item">          
        </studyCondition>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible= false">关  闭</el-button>
      </span>

    </el-dialog> 

遍历studyConditions数组中的所有元素,根据每个元素生成对应页面studyCondition 

但是一页太多放不下要用v-if判断另一个数组中的bool值,来决定页面是否折叠

<span style="display:none">

{{flush}}

</span>

 

另外定义-个flush的bool类型,也可以看自己心情定义其他类型,只要每次需要刷新的时候修改即可

<script>....</script>中加入

wrapSc:function(index){
  this.showArray[index] = false
  this.flush = !this.flush
}, 
openSc:function(index){
  this.showArray[index] = true
  this.flush= !this.flush

}, 

同时修改showArray数组和flush变量才能触发v-if里面的页面刷新,如果没有另外定义一个变量来监测数据变化,折叠效果不会有效。除非使用$set,修改变量。这样vue才会在下一个刷新周期重新渲染页面。直接赋值不一定有效

如果是el-table中要使用其他数组,实现单行编辑的效果,可以在template中放入变量,多列元素中只需要放一列

<el-table-column label="昵称" width="100" ref="column_user_nick_name"> 
<template slot-scope="scope">
  <span v-if="!showArray[scope.$index]">{{ scope.row.user_nick_name }}</span>
    <span style="display:none">{{flush}}</span>
  <span v-if="showArray[scope.$index]" class="cell-edit-input">
  <el-input v-model="user_nick_name" placeholder="请输入内容"></el-input>
  </span>
  </template>

</el-table-column>

<el-table-column fixed="right" prop="operation" label="操作" width="140" >
<template slot-scope="scope">
      <el-button v-if="!showArray[scope.$index]" @click="editBaseInfo(scope)" type="text" size="small">编辑</span></el-button>
      <el-button v-if="showArray[scope.$index]" @click="editBaseInfo(scope)" type="text" size="small">保存</span></el-button>
      <el-button v-if="showArray[scope.$index]" @click="cancelEditBaseInfo(scope)" type="text" size="small">取消</span></el-button>
      <el-button @click.native.preven="deleteBaseInfo(scope.$index, tableData)" type="text" size="small">删除</el-button>
</template>

</el-table-column>

在editBaseInfo中设置showArray对应变量,即可实现单行切换编辑状态

 

一般情况下使用 =  对值类型赋值,vue页面会自动渲染,

对对象赋值如果是同一个引用地址,页面不会自动渲染,可以尝试$set

如果只是修改了对象的某个属性,引用地址没变,可以使用assign的方式

this.bseInfo= Object.assign({}, this.bseInfo, {noUserKey: 'a'})

不直接修改该数据对象,而是生成一个新的数据对象,遵循了单向数据流 的设计理念

表达式右侧会生成一个新的对象,this.bseInfo会指向一个新的引用地址(常用于 浅拷贝 对象)

或者

this.bseInfo= Object.assign(this.bseInfo, {k: v})

表达式右侧只会修改this.bseInfo,this.bseInfo仍然指向原引用地址(常用于 合并 对象)

参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

 

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页