创建布局
首先先创建布局,这种页面使用element-ui来做会很方便,然后你构思一下,之后拿数据,拿到数据之后考虑功能的,当你选择班级之类的进行查询后,此时是后台给你返回匹配到的数据,这个功能是前后台交互的,一个动态的过程
可以自己根据需求,找到对应的板块,修改一下便可
这是我的一个整体的布局
接着选择的那个地方
<el-header style="font-size: 12px">
<span style="text-align:left;">学生列表<span class="text">({{this.abc>0?this.resource.length:data.length}}人):</span></span>
<span>
<span class="demonstration">班级</span>
<el-select v-model="className" placeholder="请选择班级" size="mini" style="width:150px">
<el-option v-for="(item,index) in classes" :key="index" :label="item.className" :value="item.classId" :disabled="item.disabled"></el-option>
</el-select>
<span class="demonstration">是否就业</span>
<el-select v-model="empName" placeholder="请选择是否就业" size="mini" style="width:150px">
<el-option v-for="(item,index) in employs" :key="index" :label="item.name" :value="item.empId" :disabled="item.disabled"></el-option>
</el-select>
<span class="demonstration">就做行业</span>
<el-select v-model="induName" placeholder="请选择就做行业" size="mini" style="width:150px">
<el-option v-for="(item,index) in industrys" :key="index" :label="item.name" :value="item.industryId" :disabled="item.disabled"></el-option>
</el-select>
<span class="demonstration">单位性质</span>
<el-select v-model="cateName" placeholder="请选择单位性质" size="mini" style="width:150px">
<el-option v-for="(item,index) in categorys" :key="index" :label="item.name" :value="item.cateId" :disabled="item.disabled"></el-option>
</el-select>
<el-button type="primary" size="mini" @click="search">查询</el-button>
</span>
</el-header>
下面内容也比较简单
<el-main>
<el-table :data="this.abc>0?resource:data" border height="100%" style="font-size:10px" @row-click="clickTr" @sort-change="sort_change">
<el-table-column prop="stuId" sortable="coumnt" label="学号" width="100" >
</el-table-column>
<el-table-column prop="name" label="姓名" width="60">
</el-table-column>
<el-table-column prop="className" label="班级" width="80">
</el-table-column>
<el-table-column prop="sex" label="性别" width="50">
</el-table-column>
<el-table-column prop="company" label="就业单位" width="190">
</el-table-column>
<el-table-column prop="address" label="单位地址" width="190">
</el-table-column>
<el-table-column prop="induName" label="就业行业" width="150">
</el-table-column>
<el-table-column prop="cateName" label="单位性质" width="100">
</el-table-column>
<el-table-column label="操作">
<template>
<span type="primary" class="text" @click="pushTo">查看详情</span>
</template>
</el-table-column>
</el-table>
</el-main>
之后界面搭好了,就是先解决拿取接口数据的问题,这个问题我这里就不讲了,之前的博客有讲到,我主要讲一下界面功能实现的问题
学号排序
大家都知道,很多时候你在查一个表格的时候,他会有一个排序的功能,就是我学号的这个升序降序的问题
因为我界面开始显示的是data[]里面的数据,当你查询之后,显示的是resource[]的数据,因为要展示一个初始化的过程,让用户一打开就能看到所以的数据data[],resource[]是查询之后后台返回给你的数据,所以这个时候需要借助一个变量,增加一个which,它在一开始是data的内容,当你查询之后,显示的是resource的内容,但是有个问题,你怎么知道你是否点击查询了呢,此时就需要再加一个变量abc:’’,当你点击查询之后触动search方法接着abc=1;
//存放column.prop的字符串值
which:'',//一开始是data的内容,当你查询之后,显示的是resource的内容
abc:''//一开始为空,点击查询之后等于1
resource:[],//我的数据
proptype: "",
// 排序后为第一页
pagesNum: 1,
sort_change(column) {
// console.log(column.prop); //当前列需要排序的数据
// console.log(column.order); //排序规则:descending降序、ascending升序
this.pagesNum = 1; // 排序后返回第一页
if(this.abc>0){//判断是否点击,点击了abc=1>0,显示resource
this.which=this.resource
}else{//此时是abc为空,显示data
this.which=this.data
}
if (column.prop === "stuId") { // 表格每一列对应的字段,必须一一对应
this.proptype = column.prop; // 将键名prop赋值给变量proptype
if (column.order === "descending") {
this.which.sort(this.my_desc_sort);
} else if (column.order === "ascending") {
this.which.sort(this.my_asc_sort);
}
} else if (column.prop === "numberScenarios") { // 第二列排序 表格每一列对应的字段,必须一一对应
this.proptype = column.prop;
if (column.order === "descending") {
this.which.sort(this.my_desc_sort);
} else if (column.order === "ascending") {
this.which.sort(this.my_asc_sort);
}
}
},
//正序倒序方法
my_desc_sort(a, b) {
return b[this.proptype] - a[this.proptype];
},
my_asc_sort(a, b) {
return a[this.proptype] - b[this.proptype];
},
查看学生信息详情
然后你想点击查看详情之后,查看所有学生的信息详情
row-click
所以这里要拿到该学生的信息,element-ui有一个方法,row-click,点击之后可以拿到该行的数据
使用方法也很简单,在首行加一个@row-click="clickTr"的方法
这个row就是该行的所有信息,下面一步你可以用跳转路由带参数的方法,将row的信息传到详情方面