精华内容
下载资源
问答
  • 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  }

     

    更多相关内容
  • <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 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>
    
    
    展开全文
  • 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">
    或者类似声明.

    展开全文
  • 1.在el-table中添加动态高度: 2.定义动态高度变量: 3.写动态高度方法 : 4.监听窗口发生变化时表格高度动态变化:
  • 在实际开发中,想做一个没有右边滚动条的页面,里面是嵌入... //窗口改变,重新取得高度 window.addEventListener('resize', ()=>{ clearTimeout(this.resizeFlag) this.resizeFlag = setTimeout(() => {
  • Table的自适应高度

    2021-06-29 10:09:18
    第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度;div { _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ,设置高度jQuery('iframe').iframeAutoHeight(); 设置所有的...
  • 初始化表格参数的时候我们设置高度: tableBox.bootstrapTable('destroy').bootstrapTable({ undefinedText: "-", //查找的字段没有发现时的显示内容 height: $(window).height() - 100, //自定义表格的高度 ...
  • 要使得一个DIV或者其他表情自适应屏幕的高度,除了可以用JS来获取屏幕的高度之外,还可以用CSS来控制其标签的高度,就是设置html,body{height:100%},再设置其标签的高度为100%,这样就可以设置其高度充满屏幕了。
  • antd Table自动占满页面剩余高度
  • 用js控制bootstrapTable高度有几种方法1、气费年月当期气量 Sm3当期气费 (元)2016-121001002016-10100100$(document).ready(function() {$('#qiliangqifei').bootstrapTable({ height: 260 });});2、气费年月当期...
  • const tableHeight=ref() //引入 onMounted onMounted(() => { tableHeight.value = window.innerHeight - tables.value.$el.offsetTop - 100 window.onresize = function() { tableHeight.value = window....
  • 窗台 ... 检出入门,API文档,示例和指南。 检查一个更简单的和相应的可编辑 通过按星号按钮支持我们。 介绍 这是基于react-window的轻巧,强大的虚拟化表实现。 为什么要靠窗的桌子?... 贡献受到高度赞赏。
  • 分析如下图(此方案中使用的是Element Table官网copy的代码(多用于OA, CMS, ERP这类系统中)如上图大体目前没有问题,但是存在细节问题那就是在table在滚动的过程中表头没有了如果说这里的列比较多,用户需要查看的...
  • Maximum table height (最大高度) Resize height and width (响应式宽高) Fixed column (固定列) Grouping table head (表头分组) Highlight row and column (高亮行、列) Table sequence (序号) Radio ...
  • 1.表格高度自适应 常见使用场景:table 区域需要表格撑满并且当表格内容超出时在table区域显示滚动条 解决方式1:纯css解决 黄色的content区域设置css 样式
  • Ant Design vue table 自适应页面高度

    千次阅读 2021-03-07 15:30:29
    表格(table)可能是在业务开发的时候,用到的最多的组件,Ant Design vue table 也有着一套十分强大的API,而其中有一项开发时,可能希望表格可以随着当前页面的分辨率,来动态调整表格的固定高度,使整个页面更加...
  • translate3d如何实现表头表列固定 书承上文,在前文【Vue进阶】青铜选手,如何自研一套UI库中介绍了Vue组件库的开发细节,举例实现了button、table等组件的开发。在Ange这个UI库中,我实现了一个内容高可定制的表格...
  • 遇到问题:el-table设置max-height后,当浏览器窗口size变大table可以自适应,缩小时table高度不会改变。 修改方法:直接上代码 .el-table { max-height: 100% !important; position: relative; } .el-table...
  • layui 设置table 行的高度方法

    千次阅读 2020-12-29 08:58:45
    layui 设置table 行的高度方法找到layui渲染之后的网页的html代码,找到table的行控件在代码中,通过...}以上这篇layui 设置table 行的高度方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多...
  • 就是标题,要求表格可以随页面窗口高度自适应,铺满。 过程: 项目使用的antd-Vue 组件,组件属性里可以设置表格的高度, 通过设置固定高度,当表格高度大于y值时,就生成滚动条来固定表格的高度。 (这里的...
  • 1、绑定表格高度,在el-table标签里面设置 :max-height="tableHeight" 2、设置表格高度,在data里面设置 tableHeight: 0 //表格高度 3、设置监听窗口变化方法,在methods里面设置 handleTableHeight: function()...
  • var tableIns = table.render({ elem:'#taskOptLogListTable' ,url: ctx+'/task/taskOptLog/query' ,error:admin.error ,cellMinWidth: 80 ,toolbar: '#taskOptLogListTable-toolbar' ,defaultToolbar: [{ ...
  • Bootstrap Table实现表格高度随着窗口大小而改变,从而显示表格滚动条,以保证分页条始终停留在下方 李北北关注 2018.05.10 18:02*字数 0阅读 2989评论 0喜欢 1 /** * 初始化表格高度 */ function ...
  • 如果你在构建管理后台,菜单栏横向摆放到整个View的顶部,下方是搜索框一些组件,然后最下面是表格来呈现数据,那么,当缩放浏览器窗口的时候,需要实现表格组件Table高度自适应。 你可以通过如下方法实现: ...
  • `el-table`默认展示20条数据时,表格高度可能会超出当前页面的高度,此时页面会出现滚动条,我们往下拖动的时候表格下方的数据是可以呈现出来,但表头可能就被页面遮挡住了。那往下拖动时怎么固定住表头呢?Element...
  • elementui的table与自适应高度

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

    万次阅读 2016-03-22 00:02:19
    这两天在调测系统的兼容性时遇到一个设置table高度的问题,页面功能很简单,就是页面中央一个文件,文件下方有一个保存按钮,文件内可以点击“添加项目按钮”来在该文件内增加表格数(这就意味着文件的高度随时可能...
  • jqGrid可以在构建的时候通过height参数来设置表格初始高度,也可以在后续通过调用setGridHeight函数...本文利用jqGrid的setGridHeight函数和window的resize事件实现jqGrid高度自适应,随窗口尺寸变动自动调整表格高度
  • Element-UI table高度动态自适应 !

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,925
精华内容 17,170
关键字:

table高度等于窗口高度

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