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获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
浅谈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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
JavaScript 的继承
2011/10/01 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python chardet库识别编码原理解析
2020/02/18 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
python属于解释型语言么
2020/06/15 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
如何用python批量调整视频声音
2020/12/22 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
浅谈html5 响应式布局
2014/12/24 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
单位接收函范文
2015/01/30 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
Redis+AOP+自定义注解实现限流
2022/06/28 Redis