vue2-样式问题-分页吸底，表单居上，根据浏览器高度或者宽度表格自适应高度

左手吻左脸。

已于 2024-01-11 14:14:20 修改

阅读量683

点赞数 11

文章标签： vue.js elementui javascript

于 2024-01-09 10:16:52 首次发布

本文链接：https://blog.csdn.net/weixin_47194802/article/details/135472103

版权

文章描述了一个使用Vue开发的网页应用，其中包含一个搜索表单，用户可以通过输入名称进行数据查询。查询结果以表格形式展示，同时提供导出所有数据的功能。核心是展示了如何在前端进行数据获取和表格展示的开发过程。

摘要由CSDN通过智能技术生成

<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>