<div> {{ message }} <table > <tr> <th>序号</th> <th v-for="th in tableTh" > {{th.title}} </th> </tr> <tr v-for="(tr,index) in dataList"> <td>{{index+1}}</td> <td v-for="td in tr" > {{td}} </td> </tr> </table> </div>
不知道大家有没有发现一个问题：这里面没有任何和业务相关的东东，那个“序号”不算的话。
这个模板也很简单，表头用一个循环就出来了，数据包里面有多少列，就可以循环出来多少列，所以我开头说的，多少列不重要，因为循环就对了，管他多少列呢？
表体用了两个循环（嵌套循环）就出来了。这个用法比较很好理解吧。这个我就不想多解释了，说多了会有一种凑字数的感觉。
4、效果
发现我剧透了，上面那个图就是运行效果。数据包设计好，模板设置好，然后交给Vue就可以了，打开浏览器查看网页，就可以看到这个效果。
五、业务分离
这个模板可以看做是所有列表的通用模板，因为他适合任何一种数据，不管是公司信息列表，还是员工信息，还是产品信息，都可以这样写，而且copy过来之后不用改！因为我把业务相关的统统放到了数据包里面。增加一个列表需求，只需要写数据包即可，不用改模板代码，是不是很方便？
当然，如果大家都是这么做的，那么就是英雄所见略同。昨天在一个前端群里问了半天，也没有人告诉我，他们的数据列表是怎么做的，结果我到现在也还是不知道在Vue里面大家是怎么做数据列表的。百度了一下，也没发现啥有用的信息。
六、功能拓展个性化设置
不知道大家有没有遇到这样的情况，接到一个任务，要求做一个数据列表里面有n个字段，这个没啥的嘛，做呗。但是这么多的列哪个在前哪个在后呢？如果文档里明确说明了，那么好办，按照文档里的来呗。如果文档里没有明确说明先后顺序，那么咋办？只能按照自己的习惯来了。
然后做好之后给用户看，第一个领导看了说，这个电话怎么放这了，不重要放最后好了。
然后给另一个领导看说，哎，这个电话怎么放最后了，不是和你们说了吗，这个要放前面！
？？？刚才那个领导说，，，，，。
然后又给操作人员看，操作人说，这个电话放这里不习惯，能不能改一改？
这里只是举一个简单的例子，客户的需求总是千奇百怪的，调整顺序只是最简单最常见的。
对于客户来说，不就是改个位置吗，我用Excel天天改顺序，你们这个项目肯定比Excel厉害吧，改个顺序很难吗？
不难呀，只是别改来改去的，另外我到底听谁的？
细心的你可能会发现，数据包里面有一个orderBy: ["c1", "c2"]没有用上，这个是干嘛的？
这个不是给数据排序的，而是给列排序的。这个数组里放的是key，后面两个数据包都是以这些key来组织数据的。那么这个数组里的key的先后顺序就是列的先后顺序。
所以只需要改这个数组里的key就可以了。然后我们可以为每一个用户都设置一个独立的数组，这样每个用户都可以有自己的列的顺序了，互相不干扰。这样客户都满意了，我们也不用总是调整顺序了。
最后，模板需要改一下：
<div> {{ message }} <table> <tr> <th>序号</th> <th v-for="key in orderBy" > {{tableTh[key].title}} </th> </tr> <tr v-for="(tr,i) in dataList"> <td>{{i+1}}</td> <td v-for="key in orderBy" v-bind:align="tableTh[key].align"> {{tr[key]}} </td> </tr> </table> </div>
先遍历这个数组，然后用里面的key提取数据在做绑定。这样，我们把调整列的先后顺序的业务需求也给分离出来了，还附带了一个福利——个性化设置。感谢大家的学习和对脚本之家的支持。
您可能感兴趣的文章: