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 相关文章推荐
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
jquery操作select大全
2014/04/25 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python实现高效求解素数代码实例
2015/06/30 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
Ado与Ado.net的相同与不同
2014/12/08 面试题
测试驱动开发的主要步骤是什么
2014/12/10 面试题
会计大学生职业生涯规划书范文
2014/01/13 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
社会实践评语
2014/04/28 职场文书
校园标语大全
2014/06/19 职场文书
工作总结与自我评价
2014/09/18 职场文书
销售员态度差检讨书
2014/10/26 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL