vue vue的table表格自适应_vue table autoHeight(vue 表格自动高度)
小编主要做的都是后台管理系统,采用布局多为头部、左侧菜单栏,右侧内容,头部和菜单栏固定位置,内容部分如果很长就会出现滚动条(iview和element都提供了布局容器),后台管理系统多为表格的增删改查,so,要需要表格自动高度,提供两种方式(纯代码分享):
1)施加在表格自身
1.普通vue项目:
根目录新建directive里面三个文件(都有所删减):
directive里面三个文件
autoHeightParams.js
/**
* @functionName: js
*@param: allScreen--全屏
*@param: table --右侧全屏表
*@param: table_S_OneLine --右侧表上有单独一行搜索
*@param: table_S_TwoLine --右侧表上有单独两行行搜索
*@param: table_S_OneLine_B_OneLine --右侧表上有一行行搜索+一行按钮
*@param: table_S_TwoLine_B_OneLine --右侧表上有两行行搜索+一行按钮
*@description:
*@author: 王建锋
*@date:
*@version: V1.0.0
*/
export default {
//全屏
allScreen: {
allHeight: 0,
precent: 100,
diffHeight: 126,
overflowX: 'hidden'
},
//右侧全屏表
table: {
allHeight: 0,
precent: 100,
diffHeight: 380
},
//右侧表上有单独一行搜索
table_S_OneLine: {
allHeight: 0,
precent: 100,
diffHeight: 295
},
//右侧表上有单独两行行搜索
table_S_TwoLine: {
allHeight: 0,
precent: 100,
diffHeight: 345
},
//右侧表上有一行行搜索+一行按钮
table_S_OneLine_B_OneLine: {
allHeight: 0,
precent: 100,
diffHeight: 360
},
//右侧表上有两行行搜索+一行按钮
table_S_TwoLine_B_OneLine: {
allHeight: 0,
precent: 100,
diffHeight: 410
},
table_Home_Small: {
allHeight: 0,
precent: 100,
diffHeight: 810
},
table_Model: {
allHeight: 0,
precent: 100,
diffHeight: 700
}
}
directives.js
const directives = {
autoHeight: {
inserted: (el, binding) => {
el.opt = {
...{
allHeight: 0,
precent: 100,
diffHeight: 100
},
dataName: binding.arg,
...binding.value,
...binding.modifiers
}
el.autoHeightHandle = function (el, binding) {
let allH = el.opt.allHeight === 0 ? window.innerHeight : el.opt.allHeight
let elH = (allH * el.opt.precent / 100) - el.opt.diffHeight
if (!el.opt.vm && el.opt.dataName) {
console.error('autoHeight:定义了dataName则必须同时定义vm参数')
return
}
if (el.opt.vm && el.opt.dataName) el.opt.vm[el.opt.dataName] = elH
if (el.opt.style === true) el.style = `height:${elH}px;overflow-y:auto;`
}.bind(null, el, binding)
window.addEventListener('resize', el.autoHeightHandle)
el.autoHeightHandle()
},
update: (el, binding) => {
el.opt = {
...{
allHeight: 0,
precent: 100,
diffHeight: 100
},
dataName: binding.arg,
...binding.value,
...binding.modifiers
}
el.autoHeightHandle()
},
unbind: (el) => {
if (el && el.autoHeightHandle) window.removeEventListener('resize', el.autoHeightHandle)
}
}
}
export default directives
index.js
import directive from './directives'
const importDirective = Vue => {
* 自动高度 v-auto-height="options"
*/
Vue.directive('auto-height', directive.autoHeight)
}
export default importDirective
在main.js中
import importDirective from '@/directive'
/**
* 注册指令
*/
importDirective(Vue)
2.使用nuxt的
把index.js改为
import directive from './directives'
export default directive
在plugins文件夹下新建auto-height.js
import Vue from 'vue'
import directives from '@/components/public/parts/directives'
Vue.directive('auto-height', directives.autoHeight)
然后就是使用在你写的表格里标签里(不管element、iview或者自己在他俩基础上封装的也好)直接加
v-auto-height:tableHeight="{vm:this, diffHeight:ahTable.diffHeight}"
:height="tableHeight"
试例为element表格再次封装的表格插件
试例为iview表格再次封装的表格插件
然后引入
import autoHeightParams from '@/components/public/parts/directives/autoHeightParams'
在data中写入
tableHeight: null,
ahTable: autoHeightParams.table_S_OneLine_B_OneLine//这里写autoHeightParams.js里面预设好的高度变量
就OK了
2)
vue vue的table表格自适应_vue table autoHeight(vue 表格自动高度)相关推荐
- bootstrapt 表格自适应_BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之 ...
- vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化
Vue - Table表格渲染上千数据优化 此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当 ...
- vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景 按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能 导出功能截图 二.安装相关依赖 cnpm install --save xl ...
- html 表格自适应布局,table自适应布局的一些总结
效果 工作中遇到的自适应表格,实现过程并不顺畅,花费了一些功夫.将其中不熟悉的技术点总结如下,期待下次可以行云流水的做出来. 自适应表格如何实现文本溢出点点的效果 自适应的表格,由于单元格的流动性,文 ...
- iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结 数据渲染相关 正常渲染 直接从教程中拿出来的组件代码: columns中填写的数据必须是一个数组,代表的是表头相关,常 ...
- vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)...
一.问题 用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因 横向添加 是复制上面的某一条数据 ...
- vue vue的table表格自适应_响应式表格,HTML表格自适应(responsive table)
简单自适应表格 前面的一篇文章里面我介绍到了一种简单的自适应表格制作方案,就是通过给表格的外面加了一个.table-container的标签 .table-container { width: 100 ...
- html表格新插入一列,VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-...
一.问题用elementUi横着增加一行数据没毛病,可以操作 添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效 点击下一行时 值就变过来 二.原因横向添加 是复制上面的某一条数据来的 ...
- Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定 前言 一.表格数据 二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结 前言 大家一定使用过很多UI,UI都 ...
最新文章
- 设置DVD为CentOS6安装源
- 详解tf.nn.dropout
- 索引 Index -- 快速查找数据
- 铃木uy125最高时速_五菱宏光mini EV月销三万辆,铃木是否后悔退出中国?
- Android 驱动开发(14)---深入学习Linux Device Tree
- foregroundservice的用处和用法
- Windows下杀进程的命令
- 不定积分/定积分——三角函数n次方不定积分公式(包含sec^nx与csc^nx不定积分公式)
- TMC5160步进电机驱动芯片,简析
- reached end of file while parsing
- [SSL_CHX][2021-12-11]奖学金
- Vue实例化对象挂载到元素上的方法
- 原神申鹤四星武器选哪个
- 国密(3)- 预主密钥/主密钥计算和Finished消息的加解密
- Xilinx基于PCIE的部分重配置实现(一)
- 关于大学生课余时间分配利用的调查报告
- STM32F407ZG_入门
- 如果将计算机网络划分为,计算机网络:如果将192.12.66.128/25划分为三个子网,其中子网1可以容纳50台计算机,...
- hadoop及spark官网版本下载步骤
- sql注入原理及解决办法
热门文章
- matplotlib markers的类型
- Dijkstra 计算两地间的最短距离
- oracle 整个表空间迁移,oracle11g迁移表空间
- java sqlserver 死锁_sqlserver数据库发生死锁处理
- java数组使用实验报告_JAVA数组与类的定义-java实验报告
- python中当地时间_R 与 Python 中与时间相关内容的梳理
- java实现bean实体与map集合相互转换
- C语言bcd码减法过程,bcd码的减法运算规则举例.ppt
- umi config.js整体defineConfig配置
- 为什么要使用Vuex?