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

最新推荐文章于 2025-03-06 10:47:49 发布

原创最新推荐文章于 2025-03-06 10:47:49 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

16 篇文章

订阅专栏

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

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 ;
    });
  },