樣式如圖
最上邊是搜索條件與操作按鈕，中間是查詢結果表格，下邊是分頁，要在瀏覽器大小改變時控件可以折行，但是不能被其他層遮蓋，需要動態計算header與表格的高度，footer的高度設置各固定值就可以
@{
ViewBag.Title = "學生基本信息";
Layout = "~/Views/Shared/_vueLayout.cshtml";
}
<script src="~/Scripts/vue/dept.js"></script>
<script src="~/Scripts/vue/grade.js"></script>
<script src="~/Scripts/vue/ban.js"></script>
<div id="app">
<el-container>
<el-header ref="header" :height="headerHeight">
<el-form size="mini" :inline="true" ref="headerrow">
<el-form-item label="專業：">
<spec-combo v-model=frmsrh.spno></spec-combo>
</el-form-item>
<el-form-item label="年級：">
<grade-input v-model="frmsrh.grade">
</grade-input>
</el-form-item>
<el-form-item label="班級：">
<ban-input v-model="frmsrh.classno" v-bind:spno="frmsrh.spno" v-bind:grade="frmsrh.grade"></ban-input>
</el-form-item>
<el-form-item label="學號：">
<el-input v-model="frmsrh.stid" style="width:120px;" clearable></el-input>
</el-form-item>
<el-form-item label="姓名：">
<el-input v-model="frmsrh.name" style="width:100px;" clearable></el-input>
</el-form-item>
<el-form-item label="當前狀態：">
<el-select v-model="frmsrh.changetype" placeholder="請選擇" style="width:100px;">
<el-option v-for="item in stuflag" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<template>
<el-button type="primary" icon="el-icon-search" size="mini" v-on:click="list">查詢</el-button>
<el-button type="success" icon="el-icon-plus" size="mini" v-on:click="add">新增</el-button>
<el-button type="primary" icon="el-icon-download" size="mini" v-on:click="exp">導出</el-button>
<el-button type="success" icon="el-icon-upload2" size="mini" v-on:click="imp">導入</el-button>
<el-button type="warning" icon="el-icon-edit-outline" size="mini" v-on:click="batchupdate">批量修改</el-button>
<el-button type="warning" icon="el-icon-picture" size="mini" v-on:click="upimg">上傳照片</el-button>
</template>
</el-form-item>
</el-form>
</el-header>
<el-main ref="maintab">
<el-table ref="table" v-loading="table.loading" size="mini" :height="table.height"
:data="table.data" border>
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column label="院系" prop="dptname" align="center" width="120" show-overflow-tooltip></el-table-column>
<el-table-column label="專業" prop="spname" align="center" width="150" show-overflow-tooltip></el-table-column>
<el-table-column label="年級" prop="grade" align="center" width="80"></el-table-column>
<el-table-column label="班級" prop="class" align="center" width="80"></el-table-column>
<el-table-column label="學號" prop="stid" align="center" width="120"></el-table-column>
<el-table-column label="姓名" prop="name" align="center" width="100"></el-table-column>
<el-table-column></el-table-column>
</el-table>
</el-main>
<el-footer style="height:35px;">
<el-pagination background
layout="total, sizes, prev, pager, next,slot"
v-bind:current-page="table.page"
v-bind:page-sizes="table.pagesize"
v-bind:page-size="table.rows"
v-bind:total="table.total"
v-on:size-change="pagesizechange"
v-on:current-change="pageindexchange">
</el-pagination>
</el-footer>
</el-container>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
headerHeight: 70,
stuflag: [{ value: '', label: '全部' }, { value: '在校', label: '在校' }, { value: '離校', label: '離校' }],
frmsrh: {
spno: '',
grade: '',
classno: '',
stid: '',
name: '',
changetype: ''
},
table: {
loading: false,
height: 500,
data: [],
page: 1,
rows: 50,
pagesize: [50, 100, 150, 200, 250, 300],
total: 0
}
}
},
methods: {
pagesizechange(size) {
this.table.rows = size;
this.list();
},
pageindexchange(pindex) {
this.table.page = pindex;
this.list();
},
list() {
},
add() {
},
exp() {
},
imp() {
},
batchupdate() {
},
upimg() {
}
},
mounted() {
this.$nextTick(function () {
this.table.height = this.$refs.maintab.$el.clientHeight - 10;
this.headerHeight = this.$refs.headerrow.$el.clientHeight;
var self = this;
window.onresize = function () {
self.table.height = self.$refs.maintab.$el.clientHeight - 10;
self.headerHeight = self.$refs.headerrow.$el.clientHeight;
}
})
},
watch: {
frmsrh: {
deep: true,
handler: function (newVal, oldVal) {
this.table.page = 1;
}
}
}
})
</script>
注意使用watch監控frmsrh的變化，有變化時要將當前頁設置爲1，否則會有因爲傳遞頁數不正確查不到結果的情況