<template>
<div class="app-container">
<div class="search-form" v-show="showSearch">
<el-form :model="searchForm" inline ref="searchFormRef" class="form-inline" >
<el-form-item label="名称" label-width="100" prop="Name">
<el-input v-model="searchForm.Name" placeholder="请输入名称" size="small" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="gytGYtName" :disabled="isDis" size="small">查询</el-button>
<el-button @click="resetForm" size="small">重置</el-button>
<el-button type="warning" plain @click="exportCondition" size="small">导出</el-button>
</el-form-item>
</el-form>
</div>
<!-- 隐藏搜索的图标 -->
<div class="icon-wrapper">
<i class="el-icon-caret-top " v-if="showSearch" @click="toggleSearchForm"></i>
<i class="el-icon-caret-bottom" v-else @click="toggleSearchForm"></i>
</div>
<!-- 表格部分 -->
<div class="el-row">
<div class="el-col" :span="24" :sm="12" :md="8" :lg="6">
<el-table :data="tableData" height="100%" border>
<el-table-column type="index" label="序号">
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Heatstation",
components: {
},
data() {
return {
// 显示搜索条件
showSearch: false,
isDis: false,//点完搜索让按钮禁用防止连续点击
searchForm: {
// 查询条件表单数据
// pageNum: 1,
// pageSize: 100,
Name: undefined,
},
tableData: [], // 表格数据
total: 0,
};
},
created() {
this.gytGYtName();},
mounted() {
// window.addEventListener('resize', this.gytGYtName);
},
methods: {
async gytGYtName() {
this.isDis = true;
this.searchForm.Name = this.searchForm.Name.replace(/\s+/g, '')//去除一下空格
//调取接口拿数据,同时放开禁用按钮
await selectDetail(this.searchForm).then((res) => {
this.tableData = res.data;
// this.total = res.total;
this.isDis = false;
})
setTimeout(() => {
this.isDis = false;
}, 10000)//要是有网络延迟拿不到,那就等十秒让他放开也行
},
resetForm() {
// 重置表单字段
// this.$refs.searchFormRef.resetFields();
// 可以选择手动重置其他数据或状态
this.searchForm.Name = undefined;
this.gytGYtName();
},
// 导出
async exportCondition() {
this.$confirm("是否确认导出所有数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
this.download(
"/rmsDataController/exportThiefHeatDetail",
this.searchForm,
`详情.xlsx`
);
});
},
//隐藏显示搜索框
toggleSearchForm() {
this.showSearch = !this.showSearch;
},
},
// beforeDestroy() {
// window.removeEventListener('resize', this.gytGYtName);
// },
};
</script>
<style scoped lang="scss">
.app-container {
display: flex;
flex-direction: column; //用flex布局,竖着来
height: 100%;
.search-form {
}
.el-form--inline .el-form-item{
margin-bottom: 2px
}
.icon-wrapper {//字体图标按钮放最右边
display: flex;
justify-content: flex-end;
}
.el-row {//表格占1,
flex: 1;
min-height: 0;//这个一定要写
width: 100%;
.el-col {
height: 100%;//也要写,然后表格的高度也是100% height="100%"
}
}
}
</style>
vue2-样式问题-分页吸底,表单居上,根据浏览器高度或者宽度表格自适应高度
于 2024-01-09 10:16:52 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)