<template>
<div class="list" ref="list" style="position: relative">
<div ref="top" style="max-height: 100px; overflow: auto">
<el-form size="mini" :inline="true">
<el-form-item>
<el-input
style="width: 150px; margin-left: 10px; margin-right: 10px"
class="searchInput"
placeholder="请输入设备Id"
v-model="formInline.deviceId"
clearable
></el-input>
<el-button type="primary" @click="searchItem">查询</el-button>
<el-button type="primary" @click="resetInput">重置</el-button>
</el-form-item>
</el-form>
</div>
<el-table
:max-height="size.table + 'px'"
:data="list"
:stripe="true"
>
<el-table-column prop="deviceCode" label="设备编号" width="180"> </el-table-column>
<el-table-column prop="deviceName" label="设备名称" width="180"> </el-table-column>
<el-table-column prop="communityName" label="小区名称"> </el-table-column>
<el-table-column prop="innerOrderName" label="垃圾类型"> </el-table-column>
<el-table-column prop="createTime" label="巡检日期">
<template slot-scope="scope">
<span>{
{
scope.row.createTime | dateFmt("YYYY-MM-DD HH:mm:ss")}}</span>
</template>
</el-table-column>
</el-table>
<!-- ---------------------------分------页------------------- -->
<div ref="page" class="Pagination">
<el-pagination
ref="pagination"
background
:current-page.sync="formInline.page"
layout="prev, pager, next, jumper,total"
prev-text="上一页"
next-text="下一页"
@current-change="handleCurrentChange"
:total="Number(total)"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
components: {
},
name: "",
data() {
return {
step: "content",
formInline: {
page: 1,
limit: 10,
deviceId: "",
},
total: 0,
list: [],
size: {
table: 400,
},
};
},
props: {
viewHeight: {
type: Number,
},
viewWidth: {
type: Number,
},
},
watch: {
// "$store.state.screenWidth"(i) {},
// "$store.state.screenHeight"() {},
viewHeight() {
this.getSize();
},
viewWidth() {
this.getSize();
},
},
methods: {
getSize() {
this.$nextTick(() => {
// 获取父有无视图高度
console.log(this.viewHeight, this.$refs.list.offsetHeight);
let hs = this.viewHeight || this.$refs.list.offsetHeight;
let h = hs - this.$refs.top.offsetHeight - this.$refs.page.offsetHeight;
this.$set(this.size, "table", h);
});
},
//获取本页数据
getList() {
this.$http
.request("menuListManage", this.formInline)
.then((data) => {
console.log(data);
this.list = data.data.data;
this.total = data.data.count;
})
.catch(() => {
});
},
//当前页码发生改变
handleCurrentChange(i) {
this.$set(this.formInline, "page", i), this.getList();
},
//条件查询
searchItem() {
this.$set(this.formInline,"page",1)
this.getList()
},
//输入框重置
resetInput() {
this.formInline.deviceId = "";
},
},
mounted() {
this.getList();
},
};
</script>
<style></style>
vue+ele实现分页以及筛选
猜你喜欢
转载自blog.csdn.net/QZ9420/article/details/115268359
今日推荐
周排行