24--页面分组显示数据（以班级为分组依据）

实现效果：

页面返回的数据：

前端对数据进行处理

<template>
	<div class="page">
		<template v-for="(group,title) in list">
			<div class="group">
				<div class="title">{{title}}</div>
				<div v-for="item in group"  :key="item.ccid">
					<div class="row">   
						<div class="left">{{item.coursename}}</div>
						<div class="right">{{item.ccid}}</div>		
						<i  @click="qiandao(item.ccid)"  class="cubeic-arrow"></i>
					</div>
				</div>
			</div>
		</template>
		<cube-button @click='add'>新增课程</cube-button>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				list: [],
				currentIndex: -1,
				index: 1,
				currentTitle:''
			}
		},
		mounted() {
			let token = sessionStorage.getItem('token')
			let data = {
				token
			}
			let list = {}
			this.$request({
				method: 'post',
				url: 'classmanager.index/index',
				data: data
			}).then(res => {
				this.group = res.map(item => {
					item['item'] = { //对象
						classname: item['classname'],
						ccid: item['ccid'],
						coursename: item['coursename'],
					}
					return item
				})
				this.list = res.forEach(function(elem, i, arr) {
					let classname = elem.classname
					if (list[classname]) {
						list[classname].push(elem)
					} else {
						list[classname] = [elem]
					}
				})
				console.log(list)
				this.list = list
			})
		},
		methods: {
			start: function(index,title) {
				// 延时器 清除 click 超过那个时间再弹出来
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.popupmenu()
				}, 800)
				this.currentIndex = index
				this.currentTitle = title 
				this.index = index
				// console.log(this.currentIndex)
				console.log(this.index)
				console.log(this.currentTitle)
			},
			myclick: function() {
				console.log('click me')
			},
			end: function() {
				this.currentIndex == -1
				clearTimeout(this.timer)
			},
			popupmenu: function() {
				this.$createActionSheet({
					title: '操作提示',
					active: 0,
					data: [{
							content: '编辑'
						},
						{
							content: '删除'
						},		
					],
					onSelect: (item, index) => {
						if (index == 0) {
							// console.log(this.list[index])
							this.edit(this.index)  //调用edit方法					
						} else if (index == 1) {
							this.delete(this.index)  //调用delete方法
						}
					},
					onCancel: () => {
			
					}
				}).show()
			},
			add: function() {
				//页面跳转
				this.$router.push('/classmanager/addbanke').catch(res => {})
			},
			qiandao:function(ccid){
				sessionStorage.setItem('ccid',ccid)
				this.$router.push({ path: '/classmanager/qiandao/index'})		
			}  //method
		} //export 
}
</script>

<style>
	.title {
		background-color: #ccc;
		line-height: 30px;
	}

	.group {
		margin-bottom: 10px;
	}

	.row {
		/* 浮动 // 填充*/
		box-sizing: border-box;
		height:55px;
		position: relative;
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* border-bottom: 1px solid #eaeaea; */
	}

	.right {
		color: gray;
		padding-right: 18px;
	}

	.row::after {
		content: '';
		display: block;
		width: 100%;
		bottom: 0;
		position: absolute;
		border-bottom: 1px solid #eaeaea;
		left: 0;
		transform: scaleY(0.5);
	}
	.cubeic-arrow{
		position: absolute;
		right: 4px;
	}
</style>