VUE : 双重 for 循环写法、table 解析任意 list 、万能表格组件、解析一维数组、动态生成 table 所有数据

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

1.需求：

我想要一个 table 组件能在实际调用时动态生成所有的 tr 、td 。

后端返回的只是一个 list ，前端页面解析时只要把这个 list 作为参数传给这个组件就能自动展示任意一维数组的所有数据。

2. 实现：

定义一个组件，取名为 oneTable，用双重 for 实现需求。

oneTable :

<template><div><table class="table table-hover"><thead><tr><!-- 循环出表头，用英文的逗号拆分字串 --><th v-for="(item,index) in headerList.split(',')" :key="index">{{item}}</th></tr></thead><tbody><!-- 循环出有多少行数据，即 list 中有多少条数据，得到 list 中的每个元素 --><tr v-for="(item,index) in bodyInfoList" :key="index"><!-- 循环取到元素的每个属性，并展示 --><td v-for="(val,index) in item" :key="index">{{val}}</td></tr></tbody></table></div>
</template><script>
export default {name: "one",props: {headerList: {type: String, // 亦可接收 Object 类型参数default: "headerList"},bodyInfoList: {type: Array,default: "bodyInfoList"}}
};
</script>

父级组件调用处：

父级组件代码：（目前用的是假数据，请求后端接口获取 list 尚有待完善）

<template><div><oneTable :headerList="headerList" :bodyInfoList="bodyInfoList"></oneTable></div>
</template><script>
import oneTable from "../parts/oneTable";export default {name: "myCare",data() {return {headerList: "账号,昵称,角色,性别,生日,地区", // 注意：逗号是英文的逗号bodyInfoList: [{account: "admin",role_name: "全局管理员",nickname: "小熊",gentle: "男",birthday: "2019-01-02",region: "成都"},{account: "jiang",role_name: "系统管理员",nickname: "暮色",gentle: "女",birthday: "2012-12-28",region: "广州"}]};},components: {oneTable},methods: {createdFun() {},mountedFun() {this.$ajax.get(this.GLOBAL.BASE_URL + "/gentle/first").then(res => {// data = res.data;console.log(res.data.navList);});}},// 页面加载就执行created() {},// 页面加载完成后执行mounted() {this.mountedFun();}
};
</script>

3.运行效果：