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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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
如何选购合适的收音机
2021/03/01 无线电
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
目前最全的python的就业方向
2018/06/05 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
animation和transition的区别
2020/10/12 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
质检部岗位职责
2013/11/11 职场文书
高二生物教学反思
2014/01/27 职场文书
文秘个人求职信范文
2014/04/22 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
JS中如何优雅的使用async await详解
2021/10/05 Javascript