Vue实例列表

<template>
	<el-main>
		<!-- //查询框 -->
		<el-form :inline="true" :model="queryForm" class="demo-form-inline">
		  <el-form-item label="姓名">
		    <el-input v-model="queryForm.name" placeholder="姓名"></el-input>
		  </el-form-item>
		  <el-form-item label="班级">
		    <el-select v-model="queryForm.classesId" placeholder="请选择班级" clearable="">
		      <el-option :label="classes.name" :value="classes.id" v-for="classes in classesList"></el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="querySubmit">查询</el-button>
		  </el-form-item>
		</el-form>
		<!-- 列表 -->
		<el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
			<el-table-column type="selection"></el-table-column>
			<el-table-column label="#" prop="id" width="50"></el-table-column>
			
			<el-table-column prop="birthday" label="生日" width="180">
			</el-table-column>
			
			<el-table-column prop="hobbyNames" label="爱好" width="180">
			</el-table-column>
			
			<el-table-column prop="name" label="姓名" width="180">
			</el-table-column>
			<el-table-column label="性别">
				<template slot-scope="scope">
					{{scope.row.sex==1?'男':'女'}}
				</template>
			</el-table-column>
			<el-table-column prop="age" label="年龄">
			</el-table-column>
			
			<el-table-column label="所属班级">
				<template slot-scope="scope">
					<span v-for="classes in classesList" v-if="classes.id==scope.row.classesId">{{classes.name}}</span>
				</template>
			</el-table-column>
			
			
			<el-table-column prop="birthday" label="创建日期" width="180">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="success" @click="edit(scope.row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination 
			:page-count="pageCount"
			:current-page="queryForm.pageNum"
			@current-change="gotoPage"
			layout="prev, pager, next">
		</el-pagination>
		<hr>
		<div>
			<el-button size="mini" type="danger" @click="batchDel()">批删</el-button>
			<el-button size="mini" type="success" @click="add">添加</el-button>
		</div>
	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				//查询条件
				queryForm:{
					pageNum:1,
					pageSize:5
				},
				//列表数据
				tableData: [],
				//table选择数据id
				selectIds:[],
				//总页数
				pageCount:1,
				classesList:[]
			}
		},
		methods: {
			add(){
				this.$router.push("/update/0")
			},
			edit(id) {
				console.log(id);
				this.$router.push("/update/"+id);
			},
			del(id) {
				console.log(id)
				//调用ajax执行删除操作
				this.axios.post("http://localhost:8090/student/del",{idList:[id]}).then(res=>{
					console.log("您删除的id为"+id);
					//刷新列表页	
					if(res.data){
						this.querySubmit();
						this.$message("删除成功")
					}else{
						this.$message("删除失败")
					}
				})
			},
			batchDel(){
				//判断是否选中id
				if(this.selectIds.length==0){
					this.$message("请选择数据");
					return;
				}
				//调用ajax执行删除操作
				this.axios.post("http://localhost:8090/student/del",{idList:this.selectIds}).then(res=>{
					
					console.log("您删除的id为"+res);
					//刷新列表页	
					if(res.data){
						this.querySubmit();
						this.$message("删除成功")
					}else{
						this.$message("删除失败")
					}
				})
			},
			handleSelectionChange(rows) {
				console.log(rows);
				// let ids = rows.map(function(rows){return rows.id})
				let ids = rows.map(rows => {return rows.id});
				this.selectIds = ids
				console.log("选中的id为:" + this.selectIds)
			},
			gotoPage(pageNum){
				this.queryForm.pageNum= pageNum;
				console.log(pageNum)
				this.list();
			},
			querySubmit(){
				//发送ajax请求 	根据queryForm查询数据
				console.log(this.queryForm);
				this.queryForm.pageNum =1;//从第一页开始查
				this.list();
			},
			//列表页的数据
			list(){
				//发送ajax,获取列表
				this.axios.get("http://localhost:8090/student/list",{params:this.queryForm}).then(res=>{
					//axios 框架封装了   res.data是接口的数据
					console.log(res.data);
					//设置分页数据,当前页
					this.pageCount=res.data.pages;
					this.queryForm.pageNum = res.data.pageNum;		
					this.tableData=res.data.list;
				})
				/* console.log("list 为:"+this.queryForm);
				this.tableData = [{
					id: 1,
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					id: 2,
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}]; */
				//设置分页数据,当前页
			},
			//查询所有班级
			listClasses(){
				this.axios.get("http://localhost:8090/classes/listAll").then(res=>{
					this.classesList = res.data;
				})
			}
		},
			
		created() {
			//get请求
			/* this.axios.get("http://localhost:8090/student/list",{params:{id:1,name:"贺旭东"}}).then(res=>{
				console.log(res.data);
			}) */
			//post请求  	后台必须加requestBody
			/* this.axios.post("http://localhost:8090/student/list",{id:1,name:"贺旭东"}).then(res=>{
				console.log(res.data);
			}) */
			//通过ajax加载列表页的数据
			this.list();
			this.listClasses();
		}
	}
</script>

<style scoped>

</style>