Element实现表格嵌套、多个表格共用一个表头的方(2)

为什么要采用这种方式解决(渲染)?
① . 项目用的UI组件是Element,它的Table表格组件,没有直接处理行的操作。
② . el-table,它是通过注入data对象数组,并在el-table-column 中用prop属性来对应对象中的键名来填入数据,从而渲染出渲染表格。其中el-table-column表示一个列,label属性来定义表格的列名,即对象的一个键名代表一列;
③ . 没想到更优的解决办法,O(∩_∩)O哈哈~

多个表格共用一个表头时,注意:
①.   需做判断,同时注意label的值。
②.  当el-table-column 的属性label无值的时候,还是会占用空间,故当前表格在页面上会出现一个代表表头的空行,需要手动更改(重写)Element表格的 thead样式

table表格嵌套的时候,注意:
① . Element的Table组件可 自定义列模板,主要是利用它实现表格嵌套部分,通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,更多用法参考。
②.  Element的Table组件可 合并行或列 ,多行或多列共用一个数据时,可以合并行或列;通过给table传入span-method方法可以实现合并行或列,参考上述代码的 **objectSpanMethod**方法(该表格的第一列需要合并多行——合并渲染表格的data数组的长度那么多行) 或者官网。

到此这篇关于Element实现表格嵌套、多个表格共用一个表头的方法的文章就介绍到这了,更多相关Element 表格嵌套内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/a5aa9fdff0c83c45342cb570250a13bc.html