网络优化网络维护网络建站,wordpress设置文章字体 插件,中国500强排名完整版,站长工具查询网前些天发现了一个巨牛的人工智能学习网站#xff0c;通俗易懂#xff0c;风趣幽默#xff0c;忍不住分享一下给大家。点击跳转到教程。
1.需求#xff1a;
我想要一个 table 组件能在实际调用时动态生成所有的 tr 、td 。
后端返回的只是一个 list #xff0c; 前端页…前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到教程。
1.需求
我想要一个 table 组件能在实际调用时动态生成所有的 tr 、td 。
后端返回的只是一个 list 前端页面解析时只要把这个 list 作为参数传给 这个组件就能自动展示任意一维数组的所有数据。
2. 实现
定义一个组件取名为 oneTable用双重 for 实现需求。
oneTable :
templatedivtable classtable table-hovertheadtr!-- 循环出表头用英文的逗号拆分字串 --th v-for(item,index) in headerList.split(,) :keyindex{{item}}/th/tr/theadtbody!-- 循环出有多少行数据即 list 中有多少条数据得到 list 中的每个元素 --tr v-for(item,index) in bodyInfoList :keyindex!-- 循环取到元素的每个属性并展示 --td v-for(val,index) in item :keyindex{{val}}/td/tr/tbody/table/div
/templatescript
export default {name: one,props: {headerList: {type: String, // 亦可接收 Object 类型参数default: headerList},bodyInfoList: {type: Array,default: bodyInfoList}}
};
/script
父级组件调用处 父级组件代码目前用的是假数据请求后端接口获取 list 尚有待完善
templatedivoneTable :headerListheaderList :bodyInfoListbodyInfoList/oneTable/div
/templatescript
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.运行效果
