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.运行效果：