antd table动态修改表格高度的实现

 更新时间:2023年07月13日 15:03:34   作者:神探小白牙  
本文主要介绍了antd table动态修改表格高度的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

antd中,flex布局不生效,得计算表格高度并且去赋值从而动态

        <div class="table1" v-loading="loading" v-show="showTable">
              <a-table
                :columns="columns"
                :data-source="tableData"
                size="middle"
                :pagination="pagination"
                :scroll="{
                  x: columns.length > 5 ? '110%' : null,
                  y: tableHeight,
                }"
                style="width: 100%"
              ></a-table>
            </div>

data 里面定义变量

      tableHeight: "100px", //表格最小高度
  created() {
    this.compute();
    window.addEventListener("resize", () => {
      this.compute();
    });
  },

在methods里面计算表格高度

 //计算表格高度
    compute() {
      this.$nextTick(() => {
        let minBox = $(".top_box")[0].clientHeight;  // 整个大盒子的高度
        let maxBox = $(".video-content")[0].clientHeight; //其余高度
        this.tableHeight = maxBox - minBox - 220 + "px"; // tab页高度 + 分页高度 + margin
      });
    },

到此这篇关于antd table动态修改表格高度的实现的文章就介绍到这了,更多相关antd table动态修改表格高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react中使用Modal.confirm数据不更新的问题完美解决方案

    react中使用Modal.confirm数据不更新的问题完美解决方案

    这篇文章主要介绍了react中使用Modal.confirm数据不更新的问题解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • React组件refs的使用详解

    React组件refs的使用详解

    这篇文章主要介绍了React组件refs的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React Hooks常用场景的使用(小结)

    React Hooks常用场景的使用(小结)

    这篇文章主要介绍了React Hooks常用场景的使用,根据使用场景分别进行举例说明,帮助你认识理解并可以熟练运用 React Hooks 大部分特性,感兴趣的可以了解一下
    2021-04-04
  • React 中使用 RxJS 优化数据流的处理方案

    React 中使用 RxJS 优化数据流的处理方案

    这篇文章主要为大家介绍了React 中使用 RxJS 优化数据流的处理方案示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • useEffect 返回函数执行过程源码解析

    useEffect 返回函数执行过程源码解析

    这篇文章主要为大家介绍了useEffect 返回函数执行过程源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 详解React项目的服务端渲染改造(koa2+webpack3.11)

    详解React项目的服务端渲染改造(koa2+webpack3.11)

    本篇文章主要介绍了详解React项目的服务端渲染改造(koa2+webpack3.11),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • react 实现表格列表拖拽排序的示例

    react 实现表格列表拖拽排序的示例

    本文主要介绍了react 实现表格列表拖拽排序,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • react显示文件上传进度的示例

    react显示文件上传进度的示例

    这篇文章主要介绍了react显示文件上传进度的示例,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下
    2021-04-04
  • React中useState值为对象时改变值不渲染问题

    React中useState值为对象时改变值不渲染问题

    这篇文章主要介绍了React中useState值为对象时改变值不渲染问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • React基于RBAC的权限控制案例讲解

    React基于RBAC的权限控制案例讲解

    这篇文章主要介绍了React基于RBAC的权限控制,通过定义角色和权限、编写权限检查函数以及在路由、组件和选择控件中使用这些函数,可以灵活地控制应用中的访问权限,需要的朋友可以参考下
    2024-05-05

最新评论