1.需求：
我想要一个 table 组件能在实际调用时动态生成所有的 tr 、td 。
后端返回的只是一个 list ， 前端页面解析时只要把这个 list 作为参数传给 这个组件就能自动展示任意一维数组的所有数据。
2. 实现：
定义一个组件，取名为 oneTable，用双重 for 实现需求。
oneTable :
代码语言：javascript复制<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 尚有待完善）
代码语言：javascript复制<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.运行效果：
