Vue. 之 Element table 高度自适应

Vue. 之 Element table 高度自适应

  使用vue创建table后,其高度自适应浏览器高度.

  在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight)

1         <el-table
2                 :data="tableData"
3                 :height="tableHeight"
4                 border
5                 style="width: 100%">

  

  在script中的data() 中添加高度的定义:

  这里的200是自己根据实际需求进行定义的,此处的200是因为该table上方有个form表单,减去form表单的高度(200)

1 data() {
2             return {
3                 tableHeight: window.innerHeight  - 200,4        }5 }

原文地址:https://www.cnblogs.com/Charles-Yuan/p/11294592.html

时间: 2024-08-30 10:27:02

Vue. 之 Element table 高度自适应的相关文章

vue vuecli element table 表格 获取行数据

是这样的,页面是商品列表 使用了element-ui  中的   el-table 正常渲染是没问题的,可是我需要显示商品图片,这就需要先获取到每个商品对象的图片路径,但是看element文档没有说怎么获取数据的,只是能够在列中使用prop 经过百度,知道了vue的插槽,代码如下 <el-table :data="goods" stripe border style="width: 100%"> <el-table-column prop=&quo

vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

<template> <div class="card-index pt-relative"> <div id="wrapper" :style="'height:'+Height+'px;'"> <iframe v-if="iframeType" :src="srcUrl" sandbox="allow-forms allow-same-origin a

在文章高度自适应的时候

在文章高度自适应的时候需要设置文章的div的最小高度.min-height:300px;IE6不识别min-height需要设置_height:300px;_height为IE6识别.而且还要为父div也设置一个最小的高度min-height:300px;_height:300px. 如果有浮动的话还要清楚浮动在父DIv中消除浮动. .fix{ *zoom:1;}.fix:after{ content: ''; clear: both; display: table;}.

easyui设置界面的高度自适应

单独设置界面中特定region区时,高度自适应失败:设置整个界面时成功.实现代码在script块中,具体代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="add_material.aspx.cs" Inherits="Truelore.Fare.Web.add_material" %> <!DOCTYPE html> <

外层div随内层div高度自适应

首先说一下textarea的高度随文字的内容自适应,用div模拟textarea.直接看代码.其中 contenteditable="true"表示div可以编辑..主要是设置 overflow: auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

高度自适应的水平垂直居中布局

高度自适应实现水平垂直居中 方法一 CSS3中有transform属性,此属性下有一个translate移动函数,此函数接受两个参数.如果两个参数都为百分比值,此时会基于自身宽度和高定进行移动.此函数移动的机制同position:relative相似. <div class="container">Hello World!</div> .container { position: absolute; top: 50%; left: 50%; transform:

Vue框架Element UI教程(二)

原文:https://www.jianshu.com/p/1704b5935a8 [时间选择器] Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 前一篇已经安装好了Element UI环境,现在开始来实际操作框架提供的一些组件的运用了. 在准备好以下文章里面的内容

UI_11 自定义UITableViewCell、Cell的高度自适应

UITableViewCell很难满足我们的需求,因此,CustomCell(自定义单元格)至关重要.下面将通过一个例子演示自定义Cell.第二部分演示根据文本内容自适应Label.Cell高度. 第一部分 CustomCell的创建 1.创建DemoTableViewController,继承自UITableViewController,并设置其为window的根视图 AppDelegate.m - (BOOL)application:(UIApplication *)application

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram