vue+iview动态渲染表格详解


Posted in Javascript onMarch 19, 2019

本文实例为大家分享了vue+iview 动态渲染表格(iview插件table),供大家参考,具体内容如下

效果图
(表格头部和表格主体都是动态渲染)

vue+iview动态渲染表格详解

重要代码

<template>
<Table ref="selection" v-for="(item) in entities" :columns="item.columns" :data="item.data" :border="false" :key='item.id' ></Table>
</template>
<script>
 export default {
  data () {
   return {
    entities: []
  }
  },
  mounted () {
   // 进行网络访问,渲染类别列表
   let that = this;
   aiteuserlist().then(function (res) {
   // 后台返回数据
    if (res.data.data.status === 0) {
     for (let i = 0; i < res.data.data.info.length; i++) {
      var entity = {
       id: -1,
       columns: [
        {
         type: 'selection',
         width: 60,
         align: 'left'
        },
        {
         title: '巴拉巴拉公司',
         key: 'user_name'
        }
       ],
       data: []
      };
      entity.columns[1].title = res.data.data.info[i].company_name;
      entity.data = res.data.data.info[i].userlist;
      entity.id = res.data.data.info[i].id;
      that.entities.push(entity);
     }
    }
   }).catch(function () {
    console.log('网络访问失败');
   });
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
window.location.hash知识汇总
Nov 09 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
浅谈vue加载优化策略
Mar 19 #Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 #Javascript
详解js加减乘除精确计算
Mar 19 #Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 #Javascript
vue多层嵌套路由实例分析
Mar 19 #Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 #Javascript
You might like
php知道与问问的采集插件代码
2010/10/12 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
js 匿名调用实现代码
2009/06/19 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
python如何实现excel数据添加到mongodb
2015/07/30 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
python实现在线翻译
2020/06/18 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
法律七进实施方案
2014/03/15 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
激励口号大全
2014/06/17 职场文书
好的促销活动方案
2014/08/21 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB