VUE+cube-ui框架实现将数据按某个相同数据进行分组

女爷i 2023-02-14 06:48 10阅读 0赞

首先展示一下我的页面效果

![数据分组后效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5NTIwMw_size_16_color_FFFFFF_t_70]

下面就是这个页面的所有代码

<template>
    	<div class="page">
    		<div class="swipe-wrapper">
    			<template v-for="(group,title) in list">
    				<div class="group">
    					<div class="title">{
       {title}}</div>
    					<template v-for="item in group">
    						<div class="row">
    							<img src="../../assets/everyclass.png" alt="" class="ban">
    							<div class="left">{
       {item.coursename}}</div>
    							<div class="right">{
       {item.id}}</div>
    						</div>
    					</template>
    				</div>
    			</template>
    		</div>
    	</div>
    </template>
    
    <script>
    	export default {
    		data: function() {
    			return {
    				list: {},
    				banke: require('@/assets/class.png'),
    			}
    		},
    		mounted() {			
    			let data = [
    				{
    					id:1,
    					classname:'18级PHP班',
    					coursename:'VUE'
    				},
    				{
    					id:2,
    					classname:'18级JAVA班',
    					coursename:'JavaScriptt'
    				},
    				{
    					id:3,
    					classname:'18级VR班',
    					coursename:'3dMAX'
    				},
    				{
    					id:4,
    					classname:'18级PHP班',
    					coursename:'微信小程序'
    				}
    			]
    			//我使用的静态数据，如果要动态的数据，可以在获取之后写下面的循环
    			//但是接收的名字一定要一致，例如我接收数据的名字是data，所以是data.forEach
    			let list = {}
    			data.forEach((e, i, arr) => {
    				let classname = e.classname
    				if (list[classname]) {
    					list[classname].push(e)
    				} else {
    					list[classname] = [e]
    				}
    			})
    			this.list = list
    		},
    	}
    </script>
    
    <style scoped>
    	.title {
    		background-color: #f8f8ff;
    		line-height: 30px;
    	}
    
    	.row {
    		display: flex;
    		align-items: center;
    		justify-content: space-between;
    		height: 35px;
    		position: relative;
    		margin-top: 12px;
    	}
    
    	.row::after {
    		display: block;
    		content: '';
    		position: absolute;
    		width: 100%;
    		height: 1px;
    		bottom: 0;
    		left: 0;
    		border-bottom: 1px solid #ebebeb;
    		-webkit-transform-origin: 0 bottom;
    		transform-origin: 0 bottom;
    		transform: scaleY(0.3);
    	}
    	.left {
    		padding-left: 10px;
    		text-align: left;
    		flex-grow: 0;
    	}
    	.right {
    		flex-grow: 1;
    		text-align: right;
    		color: gray;
    	}
    	.group {
    		margin: 10px;
    	}
    	.ban {
    		width: 35px;
    		height: 25px;
    	}
    </style>

页面是使用了两次v-for列表渲染（如果不清楚v-for列表渲染请去看vue.js的官方文档），对数据进行分组的处理是使用的forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

**注意:** forEach() 对于空数组是不会执行回调函数的。

**语法**：array.forEach(function(currentValue, index, arr), thisValue)

**参数**：

<table> 
 <tbody> 
  <tr> 
   <td><em>currentValue</em></td> 
   <td>必需。当前元素</td> 
  </tr> 
  <tr> 
   <td><em>index</em></td> 
   <td>可选。当前元素的索引值。</td> 
  </tr> 
  <tr> 
   <td><em>arr</em></td> 
   <td>可选。当前元素所属的数组对象。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><em>thisValue</em></td> 
   <td>可选。传递给函数的值一般用 "this" 值。<br> 如果这个参数为空， "undefined" 会传递给 "this" 值</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5NTIwMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200601152653790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU5NTIwMw==,size_16,color_FFFFFF,t_70