Vue+ElementUI表格封装 支持render

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue+ElementUI表格封装 支持render相关的知识,希望对你有一定的参考价值。

参考技术A 上面对table进行了封装,这里没有加入分页,有需要的可以自己添加。

vue基于elementui设置表格动态高度的几种方法

参考技术A 这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要使用calc来设置高度,然后给表格设置:height="tableH"的属性

最外层div高度的设置方法

动态获取表格高度tableH的方法

还是需要在表格外加一层div,div高度设置和方法一相同,不过表格高度不用动态设置,直接设置height="100%"即可

这种方法不需要设置外层div,定义一个文件夹tableHeight分别定义一个tableHeight.js和index.js
tableHeight.js如下

index.js如下

使用方式,在main.js里面引入以便全局使用,当然你也可以局部引入
main.js

在表格中使用

以上是关于Vue+ElementUI表格封装 支持render的主要内容,如果未能解决你的问题,请参考以下文章

vue 2.0 + ElementUI构建树形表格

vue-form-table(vuejs+element-ui的表格表单控件的二次封装插件)

Vue + ElementUI 之el-table的二次封装,带条件查询及翻页功能

五:Vue之ElementUI 表格Table与分页Pagination组件化

记一次elementui表格组件问题

element-ui表格导出及导出数据重复问题