vue项目中如何让表格获得自适应高度

最新推荐文章于 2024-07-22 10:21:38 发布

多秋浮沉度华年

最新推荐文章于 2024-07-22 10:21:38 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/webshao/article/details/117329414

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js中如何通过ref属性动态获取子元素的高度，并将其应用于表格的高度设置。在组件的`mounted`生命周期钩子中，利用`$nextTick`确保DOM更新后，计算表格容器的高度，并将值赋给表格的高度属性，实现动态适配。

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

1.父元素定义ref，子元素设置动态高度

//ref 加在普通的元素上，用this. $r e f s . （ r e f 值）获取到的是 d o m 元素 / /$ nextTick 在DOM更新后自动调用

  <div style="height:100%" ref="tableHeght">
                  <Table border stripe :columns="columns" :data="tableData" :height="tableHeight">
                    <template slot-scope="{row}" slot="action">
                      <a @click="updata(row)">修改</a>
                      <a @click="deletes(row)">&nbsp;&nbsp;删除</a>
                    </template>
                  </Table>
                </div>

2.在初始化函数或者监听函数中使用

 mounted() {
    //计算table的高度
    this.$nextTick(() => {
      let tableHeight = this.$refs.tableHeght.offsetHeight;
      this.tableHeight= tableHeight ;
    });
  },