vue+elementui v-for 循环卡片列表

画面效果（先上效果图）v-for维护原则当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。当我使用时发现，因为使用的是ajax获得列表数据，所以组件开始实例...

一条舞动青春的咸鱼

24043人浏览 · 2020-03-17 16:55:06

一条舞动青春的咸鱼 · 2020-03-17 16:55:06 发布

画面效果（先上效果图）

在这里插入图片描述

v-for维护原则

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

当我使用时发现，因为使用的是ajax获得列表数据，所以组件开始实例化的时候，数据值是没有的，v-for的维护原则是在原有的基础上更新，当你值为0时组件已经实例化了，当你ajax获得数据后，因为它的维护原则，你无法更新你的列表，即使有数据也没用

所以我最后使用了v-if这个指令，它是根据值注销整个组件，并重新实例化整个组件，您可以自己查以下v-if，v-show的区别。watch监听数据变化，在数据更新周期结束后重新实例化组件

组件代码

<template>  
<div v-if="reset">
//该div的子组件的child1的远程查询可以参考我之前的一篇文章，剩下2个子组件您请无视    
<div>      
	<child1 v-on:setMajor="setMajor"></child1>      
	<child2 v-on:setGrade="setGrade"></child2>      
	<child3 v-on:setClassnum="setClassnum"></child3>      
	<el-button type="primary" round @click="selectClassData">查询班级数据</el-button>          
</div>
//该div是循环卡片列表    
<div style="margin-left:1%;margin-right:1%">        
	<el-row>            
		<el-col :span="4" v-for="(item) in tabledata" :key="item.classId" :offset="1" >                
		<div style="margin-top:15px">                    
			<el-card :body-style="{ padding: '0px'}" shadow="hover">                    
			<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">                    
			<div>                    
			<span>{{item.classGrade}}级{{item.classMajor}}系{{item.classNumber}}班</span><br>                    
			<div class="bottom clearfix">                    
				<time class="time"><strong>创建时间:</strong>{{item.classCreatetime}}</time>                    
				<el-button type="text" class="button" @click="add(item)">查看</el-button>                    
			</div>                
			</div>                
			</el-card>                
		</div>            
		</el-col>        
		</el-row>        
	<div style="margin-left:35%">
//该div是做分页的          
<div class="block">            
	<el-pagination            
	@size-change="handleSizeChange"            
	@current-change="handleCurrentChange"            
	:current-page="current_page"            
	:page-sizes="[4,8, 12, 16]"             
	:page-size="pagesize"                     
	layout="total, sizes, prev, pager, next"            
	:total="total">                
	</el-pagination>          
</div>        
</div>
    
    </div>  
</div>
</template>

数据格式

data() {    
	return {   
		//循环卡片列表的数据源     
		tabledata:null,        
		current_page:1,       
		total:null,        
		pagesize:8,        
		listdata:{        }, 
		//v-if根据它重新实例化组件       
		reset:false,        
		//专业的值        
		major:null,        
		//年级的值        
		grade:null,        
		//班级数字        
		classnum:null,    
		}  
		}

获取数据

该方法获得后端数据，将数据赋值给tabledata

allAjax(){        
this.axios.get('http://localhost:8080/studentManagementSystem/selectTclassAll',{            
	params:{              
	limit:this.pagesize,              
	now_page:this.current_page            
	}          
	}).then((response)=>{              
		var thiz=this;                
		thiz.listdata=response.data;            
		this.$set(this.$data,'tabledata',response.data);                   
	}).catch((response)=>{          
	console.log(response);        
	})    
	},

json字符串在这里插入图片描述

监听数据变化

监听数据变化，数据变化就将reset赋值为true，让组件重新实例化

watch:{      
tabledata:function(){          
	this.$nextTick(function(){          
	/*现在数据已经渲染完毕*/          
	//console.log(this.tabledata);          
	this.reset=true;        
	})      
}  
}

js全部代码（因为我写了关于判断专业年级班级的功能，所以代码比较多，我懒得把其中的代码剥离出去了，您看着复制黏贴

<script>
import grade from './grade'
import classnum1 from './classnum'
import major from './major'

export default {  
name: 'classList',  
components:{    
	'child1':major,    
	'child2':grade,    
	'child3':classnum1,  
},  
data() {    
return {        
tabledata:null,        
current_page:1,        
total:null,        
pagesize:8,        
listdata:{ },        
reset:false,        
//专业的值       
major:null,        
//年级的值        
grade:null,        
//班级数字        
classnum:null,    
}  
},  methods: {    
refresh(){      
location.reload();    
},    
add(item){      
console.log("add");        
console.log(item);        
this.$router.push({name:'classInfo',params:{classInfo:item}});    
},    
handleSizeChange: function (size) {                
this.pagesize = size;                
//console.log(this.pagesize)                
this.judge();    
},    
handleCurrentChange: function(currentPage){                
this.current_page = currentPage;                
this.judge();    
},    
allAjax(){        
this.axios.get('http://localhost:8080/studentManagementSystem/selectTclassAll',{           
 params:{              
 limit:this.pagesize,              
 now_page:this.current_page            
 }          
 }).then((response)=>{              
 var thiz=this;                
 thiz.listdata=response.data;                       
 this.$set(this.$data,'tabledata',response.data);            
 //console.log(this.tabledata);        
 }).catch((response)=>{          
 console.log(response);        
 })    
 },    
 pageNumAjax(){      
 this.axios.get('http://localhost:8080/studentManagementSystem/selectNumByAll',{            
 params:{            }         
  }).then((response)=>{              
  this.total=response.data;              
  //console.log("一共有"+this.total+"条");        
  }).catch((response)=>{          
  console.log(response);        
  })    
  },    
  majorClassnumGradeAjax(){        
  let postData = this.$qs.stringify({                
  class_major:this.major,                
  class_grade:this.grade,                
  class_number:this.classnum                
  });            
  this.axios({            
  method: 'post',            	  
  url:'http://localhost:8080/studentManagementSystem/selectTClassByMajorGradeNumber',            
  data:postData            
  }).then((res)=>{                
  if(res.data!='error')                    
  this.tabledata=res.data                
  // console.log(this.states);            
  });    
  },    
  majorAjax(){        
  let postData = this.$qs.stringify({                
  class_major:this.major,                
  limit:this.pagesize,                
  now_page:this.current_page,                
  });            
  this.axios({            
  method: 'post',            
  url:'http://localhost:8080/studentManagementSystem/selectTclassByMajor',            
  data:postData            
  }).then((res)=>{                
  if(res.data!='error')                    
  this.tabledata=res.data                
  // console.log(this.states);            
  });    
  },    
  classnumAjax(){        
  let postData = this.$qs.stringify({                
  class_number:this.classnum,                
  limit:this.pagesize,                
  now_page:this.current_page,                
  });            
  this.axios({            
  method: 'post',            
  url:'http://localhost:8080/studentManagementSystem/selectTclassByNum',            
  data:postData            
  }).then((res)=>{                
  if(res.data!='error')                    
  this.tabledata=res.data                
  // console.log(this.states);            
  });    },    
  gradeAjax(){        
  let postData = this.$qs.stringify({                
  class_grade:this.grade,                
  limit:this.pagesize,                
  now_page:this.current_page,                
  });           
   this.axios({            
   method: 'post',            
   url:'http://localhost:8080/studentManagementSystem/selectTclassByGrade',            
   data:postData            
   }).then((res)=>{                
   if(res.data!='error')                    
   this.tabledata=res.data                
   // console.log(this.states);            
   });    },    
   pageMajorClassnumGradeAjax(){        
   this.total=1    },    
   pageMajorAjax(){        
   let postData = this.$qs.stringify({                
   class_major:this.major                
   });            
   this.axios({           
    method: 'post',            
    url:'http://localhost:8080/studentManagementSystem/selectNumByMajor',            
    data:postData            
    }).then((res)=>{                
    if(res.data!='error')                    
    this.total=res.data;                
    // console.log(this.states);           
     });    
     },    
     pageClassnumAjax(){      
     this.axios.get('http://localhost:8080/studentManagementSystem/selectNumByNum',{            
     params:{              
     class_number:this.classnum            
     }          
     }).then((response)=>{              
     this.total=response.data;                            
     //console.log("一共有"+this.total+"条");        
     }).catch((response)=>{          
     console.log(response);        
     })    
     },    
     pageGradeAjax(){      
     this.axios.get('http://localhost:8080/studentManagementSystem/selectNumByGrade',{           
      params:{              
      class_grade:this.grade            
      }          
      }).then((response)=>{              
      this.total=response.data;              
      //console.log("一共有"+this.total+"条");        
      }).catch((response)=>{          
      console.log(response);        
      })    },    
      setGrade(value){      
      this.grade=value;      
      //console.log('setGrade:'+this.grade);    
      },    setClassnum(value){      
      this.classnum=value.value;      
      //console.log(value.value);      
      //console.log('setClassnum:'+this.classnum);    
      },    
      setMajor(value){      
      this.major=value;      
      //console.log(this.major);    
      },    
      judgeClassData(){      
      if(this.major&&this.classnum&&this.grade){        
      console.log('major num grade not null');        
      this.majorClassnumGradeAjax();        
      this.pageMajorClassnumGradeAjax();      
      }else if(this.major){        
      console.log('major not null');        
      this.majorAjax();        
      this.pageMajorAjax();      
      }else if(this.grade){        
      console.log('grade not null');        
      this.gradeAjax();        
      this.pageGradeAjax();      
      }else if(this.classnum){        
      console.log('classnum not null');        
      this.classnumAjax();        
      this.pageClassnumAjax();      
      }else{         
      this.$message('请选择班级||专业||班级序号');      
      }    
      },    
      judge(){      
      if(this.major&&this.classnum&&this.grade){        
      console.log('major num grade not null');        
      this.majorClassnumGradeAjax();      
      }else if(this.major){        
      console.log('major not null');        
      this.majorAjax();      
      }else if(this.grade){        
      console.log('grade not null');        
      this.gradeAjax();      
      }else if(this.classnum){        
      console.log('classnum not null');        
      this.classnumAjax();      
      }else{         
      this.allAjax();      
      }    
      },    
      selectClassData(){        
      this.judgeClassData();    
      }      
      },  
      beforeMount() {      
      this.allAjax();      
      this.pageNumAjax();        
      },  
      mounted() {        
      }, 

	watch:{      
	tabledata:function(){          
	this.$nextTick(function(){          
	/*现在数据已经渲染完毕*/          
	//console.log(this.tabledata);          
	this.reset=true;        
	})      
	}  
	}
}
</script>
<style scoped>
.time {    
font-size: 13px;    
color: #999;  
}    
.bottom {    
margin-top: 13px;    
line-height: 12px;  
}
  .button {   
   padding: 0;    
   float: right;  
   }
  .image {    
  width: 100%;    
  display: block;  
  }
  .clearfix:before,  
  .clearfix:after {      
  display: table;     
   content: "";  
   }    
   .clearfix:after {      
   clear: both  }
   </style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^