Vue如何实现表格行列转换功能？

本文共计1371个文字，预计阅读时间需要6分钟。

行列转换是老年人常讨论的问题，近日笔者遇到了这个难题。前端同事说，只有拿到单列的数据才能绑定，折腾了好久才搞定，还说这个应该后端直接出数据。

行列转换是一个老生常谈的问题，这几天逛知乎有遇到了这个问题。一个前端说，拿到的数据是单列的需要做转换才能够绑定，折腾了好久才搞定，还说这个应该后端直接出数据，不应该让前端折腾。

这个嘛，行列转换在后端也不是很好解决的问题，而且还有一个性能的问题，综合考虑，我还是觉得应该由前端进行行列转换。光说不练假把式，所以拿出来代码仅作为抛砖引玉，供大家参考一下，如果有更好的方法，欢迎一起来探讨。

1、模板设计。

<div id="app"> <table class="table_default1" style="width: 400px;"> <tr> <th v-for="item in tableHeader"> {{item}} </th> </tr> <tr v-for="tr in tableBody"> <td v-for="td in tr"> {{td}} </td> </tr> </table> </div>

这个比较简单，先遍历 tableHeader 把表头循环出来。

然后在双重遍历，tableBody 提供行数据，然后在遍历出来td。

这里没有任何与业务逻辑相关的代码，也就是说这个模板可以适合任何行列转换的需求。