前些天發(fā)現(xiàn)了一個(gè)巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住分享一下給大家。點(diǎn)擊跳轉(zhuǎn)到教程。

1.需求：

我想要一個(gè) table 組件能在實(shí)際調(diào)用時(shí)動態(tài)生成所有的? tr 、td 。

后端返回的只是一個(gè) list ， 前端頁面解析時(shí)只要把這個(gè) list 作為參數(shù)傳給 這個(gè)組件就能自動展示任意一維數(shù)組的所有數(shù)據(jù)。

2. 實(shí)現(xiàn)：

定義一個(gè)組件，取名為 oneTable，用雙重 for 實(shí)現(xiàn)需求。

oneTable :

<template><div><table class="table table-hover"><thead><tr><!-- 循環(huán)出表頭，用英文的逗號拆分字串 --><th v-for="(item,index) in headerList.split(',')" :key="index">{{item}}</th></tr></thead><tbody><!-- 循環(huán)出有多少行數(shù)據(jù)，即 list 中有多少條數(shù)據(jù)，得到 list 中的每個(gè)元素 --><tr v-for="(item,index) in bodyInfoList" :key="index"><!-- 循環(huán)取到元素的每個(gè)屬性，并展示 --><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 類型參數(shù)default: "headerList"},bodyInfoList: {type: Array,default: "bodyInfoList"}} }; </script>

父級組件調(diào)用處：

父級組件代碼：（目前用的是假數(shù)據(jù)，請求后端接口獲取 list 尚有待完善）

<template><div><oneTable :headerList="headerList" :bodyInfoList="bodyInfoList"></oneTable></div> </template><script> import oneTable from "../parts/oneTable";export default {name: "myCare",data() {return {headerList: "賬號,昵稱,角色,性別,生日,地區(qū)", // 注意：逗號是英文的逗號bodyInfoList: [{account: "admin",role_name: "全局管理員",nickname: "小熊",gentle: "男",birthday: "2019-01-02",region: "成都"},{account: "jiang",role_name: "系統(tǒng)管理員",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);});}},// 頁面加載就執(zhí)行created() {},// 頁面加載完成后執(zhí)行mounted() {this.mountedFun();} }; </script>

3.運(yùn)行效果：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的VUE : 双重 for 循环写法、table 解析任意 list 、万能表格组件、解析一维数组、动态生成 table 所有数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。