element-ui的表格。表头和表格数据都是接口动态给的。多级表头。如何写呢？

ゝ一世哀愁。 2023-02-16 11:00 84阅读 0赞

element-ui多级表头官网是这样写的https://element.eleme.cn/#/zh-CN/component/table

我们看到这是已知一级和二级表头是那几个字段然后拼起来的。如果表头信息是接口动态给的，根据传参每次都是不一样的。这样官网的这个例子根据没办法实现。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70

就像上面这样的表格数据。他的表头是两级的。表头和数据都是接口给我的。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 1

上面是接口传来的数据。titledata是表头的数据。children如果长度大于0.children就是他的2级表头。tablebase是表格内容。表头的value值对应表格数据的键值。

如果tablebase作为表格一级表头的表格。键是表头，那么我们即使不知道长度也可以通过循环来写的。参考这篇文章https://blog.csdn.net/qq_33769914/article/details/106547680。

但是此时我们都是动态的还是关联的怎么办呢。开始我用的原生的tr来写表头。在用上面链接方法写表格内容。但是这相当于是两个部分。因为不能修改tr的宽度，所以导致根本对不整齐。下面内容过长出现滚动条，上面的表头却是挤着硬在一行内撑的换行。

然后我发现了我们可以用组件。把el-table和el-table-column分开来写

父页面table.vue

可以看到上面的页面使用了组件MyTable。下面我们来写MyTable.vue

上面的组件呢又用到了MyColumn这个子组件。

MyColumn.vue

发表评论

表情：
评论列表 （有 0 条评论，84人围观）

还没有评论，来说两句吧...

相关阅读