Vue. 之 Element table 高度自适应
Vue. 之 Element table 高度自适应
使用vue创建table后,其高度自适应浏览器高度.
在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight)
<el-table
:data="tableData"
:height="tableHeight"
border
style="width: 100%">
在script中的data() 中添加高度的定义:
这里的200是自己根据实际需求进行定义的,此处的200是因为该table上方有个form表单,减去form表单的高度(200)
data() {
return {
tableHeight: window.innerHeight - 200,
4 }
5 }
Vue. 之 Element table 高度自适应的更多相关文章
- Vue. 之 Element table 单元格内容隐藏
Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...
- vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)
<template> <div class="card-index pt-relative"> <div id="wrapper ...
- element el-table表格的vue组件二次封装(附表格高度自适应)
基于vue的el-table表格二次封装组件方法 前言 在公司实习使用vue+element-ui框架进行前端开发,使用表格el-table较为多,有些业务逻辑比较相似,有些地方使用的重复性高,如果多 ...
- element table固定表头,表的高度自适应解决方法
主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...
- 实用小工具不定期合集(textarea 高度自适应、自动计算Y轴刻度、json转table)
1.textarea高度自适应 这个非常有用,但是网上的解决方案都不尽人意,话不多说,上代码. function auto (elem) { var minHeight = 30 var change ...
- autoHeight.vue 高度自适应
autoHeight.vue 高度自适应 <!-- * @description 自适应高度 * @fileName autoHeight.vue * @author 彭成刚 * @date 2 ...
- Vue. 之 Element获取table中选中的行
Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- JS跨域解决iframe高度自适应(IE8/Firefox/Chrome适用)
参考园友的js跨越实现,有提到三种方式: 1. 中间页代理方式,利用iframe的location.hash 参见:http://www.5icool.org/a/201203/a1129.html ...
随机推荐
- Censoring【自动AC机】【水题毁我青春】【20190614】
这题简直比注水猪肉还水QAQ. 以前做过KMP的Censoring单串匹配,果断选择自动AC机w 对短串建自动AC机 长串去机子里匹配 用个栈边匹配边弹出 记得弹出一个串后把匹配点指向栈顶就ojbk ...
- work-shineyoo:杂项1906
ylbtech-work-shineyoo:杂项1906 1.返回顶部 1. 1.1 SMS (手机的)短信服务.Short Message Service. 1.2 VOD 视频点播.Video o ...
- SpringBoot学习笔记(四):SpringBoot集成Mybatis-Plus+代码生成
简介 官网:http://baomidou.oschina.io/mybatis-plus-doc/ 平时业务代码不复杂的时候我们写什么代码写的最多,就是我们的SQL语句啊,配置那么多的Mapper. ...
- c++ STL使用
STL标准模板库,提供一些类似java集合类的数据结构容器.比如eque.list.vector.map 等.还提供一些支持这些容器的算法和遍历容器的迭代器. 使用方法 #include <io ...
- Delphi版俄罗斯方块-前奏
前言 基础知识讲了很多,但是并没有串联起来,所以我最近一直在准备个小项目,但是这个项目的要求不含有数据库部分,也就是数据持久存储的功能,此外不能含有网络功能,它只是对基础知识的一个总结,最后一点是这个 ...
- Asp.net Core Jenkins Docker 实现一键化部署
写在前面 在前段时间尝试过用Jenkins来进行asp.net core 程序在IIS上面的自动部署.大概的流程是Jenkins从git上获取代码 最开始Jenkins是放在Ubuntu的Docker ...
- jqGrid的subGrid子表格
使用完整jqGrid作为子表格 使用子表格,涉及到jqGrid的三个选项: subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false:当此项设为true的时候,Gr ...
- MapReduce 图解流程
Anatomy of a MapReduce Job In MapReduce, a YARN application is called a Job. The implementation of t ...
- Redis Replication & Sentinel
实践目标: Redis Replication 一主:192.168.1.104 双从:192.168.1.101 192.168.1.103 Sentinel:192.168.1.102 系统环境: ...
- php 支付宝新版本app支付以及回调
;支付宝快速接入; 支付宝2017年新版本支付基本业务逻辑 服务端生成字符串 交给客户端, 客户端调用接口,将这段字符串str传过去 调用起支付界面. 其中字符串str包含了所有请求参数,以及请求参数 ...