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

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

vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...
自己做一个table插件 (一)Ajax获取数据后动态生成table
今天我给大家带来一个简单的JQ插件,Ajax获取数据后动态生成table.当然,有这种功能的插件有很多.著名的有DataTable.JqGrid--它们虽然功能丰富,成熟,拿来做二次开发是一个不错的选 ...
jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...
JSP动态生成table并输出为Excel
服务端源码 public JSONArray getListToDeptPart() throws Exception {JSONArray jsonArr = new JSONArray();Lis ...
[导入]如何动态生成table(javascript)
function ff() { var parNode = document.getElementById("table1"); //定位到t ...
JQuery动态生成Table表格
主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
顶级好用的 5 款 Vue table 表格组件测评与推荐
本文首发:<顶级好用的 5 款 Vue table 表格组件测评与推荐 - 卡拉云> Vue table 表格组件作为绝大多数项目需要内嵌的组件,可谓十分重要.表格看起来虽简单,实则坑很深 ...
Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解
缺乏耐心的读者请主要关注标红部分! 因部分内容自动转为代码格式,所以代码部分请主要关注注释部分! 1.Table表格组件内容自定义: 官网Table表格组件部分示例代码: columns12: [{t ...

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

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

最新文章

热门文章