精华内容
下载资源
问答
我要提问
  • vue，table高度自适应
    千次阅读
    2020-07-02 11:35:09 
        <el-table
2    :data="tableData"
3    :height="tableHeight"
5    style="width: 100%">
    </el-table>



  data() {
2   return {
3     tableHeight: window.innerHeight  - 200, //窗口的高度减去你需要减去的高度
4　　}
5  }

     

    更多相关内容

  • 前端vue实现element Table表格自适应窗口高度

     2021-06-04 10:09:16
    <template> <div> <el-table :data="tableData" style="width: 100%" ref="table" :height="tableHeight"> <el-table-column prop="date" label="日期 
    <template>
  <div>
    <el-table :data="tableData"
              style="width: 100%"
              ref="table"
              :height="tableHeight">
      <el-table-column prop="date"
                       label="日期"
                       width="180">
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableHeight: 0,
    };
  },
  watch: {
    tableHeight() {
      window.onresize = () =>
        (this.tableHeight =
          window.innerHeight - this.$refs["table"].$el.offsetTop - 50);
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs["table"].$el.offsetTop - 50;
    });
  },
};
</script>

<style lang="scss" scoped>
</style>

    效果：在这里插入图片描述
    变化窗口大小后
    在这里插入图片描述

    收起
    展开全文
    vue.js javascript

  • Vue iView table高度随浏览器窗口大小变化

     2020-10-28 15:04:24
    Vue Iview table高度随浏览器窗口大小变化 在mounted中监听 <template> <div class="tables"> <Table class="table" :height="tableHeight" :columns="columns" :data="list" :loading=...

    Vue Iview table高度随浏览器窗口大小变化

    在mounted中监听

    <template>
  <div class="tables">
    <Table class="table"
           :height="tableHeight"
           :columns="columns"
           :data="list"
           :loading="loading"
           :border="true" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      tableHeight: 800
    }
  },
  mounted() {
    this.tableHeight = document.body.clientHeight
    // 监听浏览器窗口大小变化从而改变table高度
    window.onresize = () => {
      return (() => {
        this.tableHeight = document.body.clientHeight
        console.log(this.tableHeight)
      })()
    }
  }
}
</script>

<style lang="less" scoped >
.tables{
  height: 100vh;
  overflow: auto;
  background: white;
}
</style>
    收起
    展开全文
    vue iView

  • table高度自适应浏览器窗口

     千次阅读 2010-04-08 16:18:00
    <table width="100%" border="black solid 1px" cellpadding="0" cellspacing="0">    <td height="50">    </table> <table width="100%" border="blue solid 1px" cellpadding="0" cellspacing="0" ...

    ------------------------------------------1--------------------------------------------------

    <body scroll=no>
    <table width="100%" border="black solid 1px" cellpadding="0" cellspacing="0">
      <tr>
        <td height="50">&nbsp;</td>
      </tr>
    </table>
    <table width="100%" border="blue solid 1px" cellpadding="0" cellspacing="0" bgcolor="#FF9933"  id="size">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    <table width="100%" border="black solid 1px" cellspacing="0" cellpadding="0">
      <tr>
        <td height="200">&nbsp;</td>
      </tr>
    </table>
    <script language="javascript" type="text/javascript">
    <!--
     function display(){
      var height=document.body.clientHeight;
             var width=document.body.clientWidth;
     document.getElementById("size").style.height=parseInt(height)-250;
     window.resizeTo(width+10,height+170);
      }
    window.οnlοad=display();
    //-->
    </script>
    </body>

     

     

     

    ------------------------------------------2--------------------------------------------------

    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
    <title></title>
    <meta name="generator" content="editplus">
    <meta name="author" content="Ariex">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style type="text/css">
    body{margin:0px;padding:0px;overflow:hidden;padding-top:22px;padding-bottom:22px;}
    div{margin:0px;padding:0px;}
    #header{background-color:blue;color:white;position:absolute;top:0px;left:0px;height:16px;width:100%;}
    #content{background-color:yellow;width:100%;height:100%;overflow:auto}
    #footer{background-color:green;color:white;width:100%;height:16px;position:absolute;bottom:0px;left:0px;}
    </style>
    <script language="javascript">
    </script>
    </head>
    <body>
    <div id="header">header</div>
    <div id="content">
    <script language="javascript">
    for(i=0;i<1000;i++){
     document.write(i+"<br />");
    }
    </script>
    </div>
    <div id="footer">footer</div>
    </body>
    </html>

     

    关于高度自适应还有一个因素,就是头部声明问题.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    XHTML1.0下.
    高度自适应是不行的.
    如果要使用高度自适应必须头部声明为:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    或者类似声明.

    收起
    展开全文
    javascript xhtml border

  • element-ui中el-table添加动态高度，添加窗口监听事件

     千次阅读 2019-10-23 08:59:09
    1.在el-table中添加动态高度： 2.定义动态高度变量： 3.写动态高度方法 ： 4.监听窗口发生变化时表格高度动态变化：
    收起

  • vue监听窗口改变，动态改变table的高度

     2021-10-02 19:20:47
    在实际开发中，想做一个没有右边滚动条的页面，里面是嵌入... //窗口改变，重新取得高度 window.addEventListener('resize', ()=>{ clearTimeout(this.resizeFlag) this.resizeFlag = setTimeout(() => {
    收起
    css html html5

  • Table的自适应高度

     2021-06-29 10:09:18
    第一种：一定高度内容加多时自适应高度，而内容少时DIV有一定最小高度；div { _height:200px; /* css 注解： 仅IE6设别此属性，假定最低高度是200px ，设置高度jQuery('iframe').iframeAutoHeight(); 设置所有的...
    收起

  • Bootstrop Table窗口大小改变时修改Table高度

     万次阅读 2018-01-17 14:21:24
    初始化表格参数的时候我们设置高度： tableBox.bootstrapTable('destroy').bootstrapTable({ undefinedText: "-", //查找的字段没有发现时的显示内容 height: $(window).height() - 100, //自定义表格的高度 ...
    收起
    tab切换

  • 设置一个DIV或者table的高度自适应屏幕的高度

     千次阅读 2013-01-03 09:30:59
    要使得一个DIV或者其他表情自适应屏幕的高度，除了可以用JS来获取屏幕的高度之外，还可以用CSS来控制其标签的高度，就是设置html,body{height:100%},再设置其标签的高度为100%，这样就可以设置其高度充满屏幕了。
    收起

  • Antd Table自适应页面剩余高度

     2022-02-16 17:03:35
    antd Table自动占满页面剩余高度
    收起
    react.js 前端

  • bootstrap 表格插件bootstrap-table的js设置高度及高度自适应

     千次阅读 2021-01-14 10:38:02
    用js控制bootstrapTable的高度有几种方法1、气费年月当期气量 Sm3当期气费 (元)2016-121001002016-10100100$(document).ready(function() {$('#qiliangqifei').bootstrapTable({ height: 260 });});2、气费年月当期...
    收起

  • vue3 elementplus table 高度自适应 的两种方法

     千次阅读 2022-04-14 11:30:03
    const tableHeight=ref() //引入 onMounted onMounted(() => { tableHeight.value = window.innerHeight - tables.value.$el.offsetTop - 100 window.onresize = function() { tableHeight.value = window....
    收起
    vue3 vite

  • window-table：基于React窗口的React窗口表

     2021-01-31 17:10:10
    窗台 ... 检出入门，API文档，示例和指南。 检查一个更简单的和相应的可编辑 通过按星号按钮支持我们。 介绍 这是基于react-window的轻巧，强大的虚拟化表实现。 为什么要靠窗的桌子？... 贡献受到高度赞赏。
    收起

  • Element Table 自适应高度解决方案

     2021-06-27 06:23:22
    分析如下图(此方案中使用的是Element Table官网copy的代码(多用于OA, CMS, ERP这类系统中)如上图大体目前没有问题，但是存在细节问题那就是在table在滚动的过程中表头没有了如果说这里的列比较多，用户需要查看的...
    收起

  • vxe-table vue表格解决方案-其他

     2021-06-11 21:41:47
    Maximum table height （最大高度） Resize height and width （响应式宽高） Fixed column （固定列） Grouping table head （表头分组） Highlight row and column （高亮行、列) Table sequence （序号) Radio ...
    收起

  • element 解决table高度自适应

     2021-02-01 13:40:13
    1.表格高度自适应 常见使用场景：table 区域需要表格撑满并且当表格内容超出时在table区域显示滚动条 解决方式1：纯css解决 黄色的content区域设置css 样式
    收起
    elementui vue

  • Ant Design vue table 自适应页面高度

     千次阅读 2021-03-07 15:30:29
    表格(table)可能是在业务开发的时候，用到的最多的组件，Ant Design vue table 也有着一套十分强大的API，而其中有一项开发时，可能希望表格可以随着当前页面的分辨率，来动态调整表格的固定高度，使整个页面更加...
    收起

  • ant design vue table 高度自适应_再谈table组件：固定表头和表列

     千次阅读 2020-11-21 20:01:31
    translate3d如何实现表头表列固定 书承上文，在前文【Vue进阶】青铜选手，如何自研一套UI库中介绍了Vue组件库的开发细节，举例实现了button、table等组件的开发。在Ange这个UI库中，我实现了一个内容高可定制的表格...
    收起
    div悬浮在固定位置

  • 饿了么table组件 el-table高度自适应

     2020-08-31 14:29:17
    遇到问题：el-table设置max-height后，当浏览器窗口size变大table可以自适应，缩小时table高度不会改变。 修改方法：直接上代码 .el-table { max-height: 100% !important; position: relative; } .el-table...
    收起
    css3

  • layui 设置table 行的高度方法

     千次阅读 2020-12-29 08:58:45
    layui 设置table 行的高度方法找到layui渲染之后的网页的html代码，找到table的行控件在代码中，通过...}以上这篇layui 设置table 行的高度方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多...
    收起

  • 【Bug小记】antd表格高度自适应窗口高度

     2021-11-24 16:50:38
    就是标题，要求表格可以随页面窗口高度自适应，铺满。 过程： 项目使用的antd-Vue 组件，组件属性里可以设置表格的高度， 通过设置固定高度，当表格高度大于y值时，就生成滚动条来固定表格的高度。 （这里的...
    收起
    vue html typescript

  • Vue中监听窗口大小，修改el-table表格滚动条，控制表格高度

     千次阅读 2019-04-15 17:46:22
    1、绑定表格高度,在el-table标签里面设置 :max-height="tableHeight" 2、设置表格高度，在data里面设置 tableHeight: 0 //表格高度 3、设置监听窗口变化方法，在methods里面设置 handleTableHeight: function()...
    收起
    滚动条

  • 00010 - layui 表格table 高度自适应充满页面

     千次阅读 2020-05-25 22:06:21
    var tableIns = table.render({ elem:'#taskOptLogListTable' ,url: ctx+'/task/taskOptLog/query' ,error:admin.error ,cellMinWidth: 80 ,toolbar: '#taskOptLogListTable-toolbar' ,defaultToolbar: [{ ...
    收起
    layui

  • Bootstrap Table实现表格高度随着窗口大小而改变，从而显示表格滚动条，以保证分页条始终停留在下方 李北北...

     千次阅读 2019-06-05 09:44:15
    Bootstrap Table实现表格高度随着窗口大小而改变，从而显示表格滚动条，以保证分页条始终停留在下方 李北北关注 2018.05.10 18:02*字数 0阅读 2989评论 0喜欢 1 /** * 初始化表格高度 */ function ...
    收起

  • ElementU表格组件Table高度自适应

     2020-10-01 22:54:39
    如果你在构建管理后台，菜单栏横向摆放到整个View的顶部，下方是搜索框一些组件，然后最下面是表格来呈现数据，那么，当缩放浏览器窗口的时候，需要实现表格组件Table的高度自适应。 你可以通过如下方法实现： ...
    收起
    window html vue 支持向量机

  • Element表格高度根据浏览器窗口大小动态改变

     2022-03-10 18:34:57
    `el-table`默认展示20条数据时，表格高度可能会超出当前页面的高度，此时页面会出现滚动条，我们往下拖动的时候表格下方的数据是可以呈现出来，但表头可能就被页面遮挡住了。那往下拖动时怎么固定住表头呢？Element...
    收起
    vue.js 前端 javascript

  • elementui的table与自适应高度

     千次阅读 2021-01-22 16:57:20
    创建高度变量 data(){ return { tableHeight : 400 } } 给table应用变量 ...用 窗口高度 - 上边其他布局高度 - 最上面的导航栏高度和其他边距高度(225) = 表格高度（也就是剩下的高度） 225是
    收起
    html vue elementui

  • JavaScript动态设置table的高度

     万次阅读 2016-03-22 00:02:19
    这两天在调测系统的兼容性时遇到一个设置table高度的问题，页面功能很简单，就是页面中央一个文件，文件下方有一个保存按钮，文件内可以点击“添加项目按钮”来在该文件内增加表格数（这就意味着文件的高度随时可能...
    收起
    javascript 浏览器兼容性 chrome

  • jqGrid 如何实现高度自适应 跟随窗口尺寸变动自动调整高度

     千次阅读 2019-05-14 08:42:46
    jqGrid可以在构建的时候通过height参数来设置表格初始高度，也可以在后续通过调用setGridHeight函数...本文利用jqGrid的setGridHeight函数和window的resize事件实现jqGrid高度自适应，随窗口尺寸变动自动调整表格高度。
    收起
    jqGrid

  • Element-UI table的高度动态自适应 !

     万次阅读 2020-04-14 15:52:58
    从官方文档，我们可以知道 table 想...在height中 使用 window.innerHeight，返回窗口的文档显示区的高度（这是一个动态值，随着我们浏览器大小会变化）。 好了，到这里，小伙伴们是不是以为就结束了………才怪 ! ...
    收起
    vue

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,925
精华内容 17,170
热门标签
关键字：

table高度等于窗口高度

友情链接： 国际跳棋 1.0.rar