vue实现表格的动态高度-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue实现表格的动态高度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：表格能够根据窗口的大小自动适配页面高度

vue实现表格的动态高度,css,vue基础,vue项目中常用操作,vue.js,前端,javascript

防抖和节流函数的使用场景是当需要对频繁触发的事件进行限制时，例如：防抖函数常用于限制用户在短时间内多次触发某一事件，例如搜索框输入并搜索，当用户一直在输入时，我们可以使用防抖函数来避免多次请求搜索结果，减轻服务器压力。节流函数常用于限制事件在某一时间段内的触发次数，例如页面滚动、鼠标移动等事件，当我们需要在频繁触发事件的同时保证性能，可以使用节流函数来控制事件的触发次数。总之，防抖和节流函数都能够对频繁触发的事件进行限制，提高性能和用户体验。具体使用哪种函数要根据实际场景和需求来确定。文章来源地址https://www.toymoban.com/news/detail-674701.html

 <div class="threeChartsSlotTables-tablesBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        :height="tableHeight"
        style="width: 100%">
        <el-table-column prop="accruedOne" label="日期" width="180"/>
        <el-table-column prop="accruedThree" label="姓名" width="180"/>
        <el-table-column prop="accruedTwo" label="地址"/>
        <el-table-column prop="ts" label="时间"/>
      </el-table>


<!-- 自己封装的组件，也可使用elementUI中的分页实现 -->
      <pagination-component
        :hidden="total <= 0"
        :total="total"
        :page="paginationConfig.pageNum"
        :limit="paginationConfig.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        @pagination="handleChangePagination"
      />
    </div>


  data() {
    return {
      tableData: [],
      total: 0,
      tableHeight: "540px", // 默认高度
      paginationConfig: {
        pageNum: 1,
        pageSize: 10,
      },
      tableLoading: false,
      resizeHandler: null,
    };
  },


// 需npm install loadsh
import { throttle } from "loadsh"


  methods: {

    handleResize() {
      this.$nextTick(() => {
        let el = document.querySelector(".threeChartsSlotTables-tablesBox");
        this.tableHeight = `calc(${el.clientHeight}px - 60px)`;
      });
    },


}


  mounted() {
    this.handleResize()
    this.resizeHandler = throttle(this.handleResize, 200);
    window.addEventListener('resize', this.resizeHandler);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler);
  },



.threeChartsSlotTables-tablesBox {
  width: 100%;
    height: 600px;
    margin: 16px 0;

}

到了这里，关于vue实现表格的动态高度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！