vue+iview 动态渲染表格(iview插件table)

失眠的咕噜

已于 2024-06-21 15:26:50 修改

阅读量8.2k

点赞数

分类专栏： vue+iview（table）文章标签： vue vue+iview table iview动态渲染表格

于 2018-12-21 19:46:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44104341/article/details/85170725

版权

vue+iview（table）专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Vue项目中结合iView插件实现表格的动态渲染，展示了一个包含动态头部和主体的表格实例，并提供了关键代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+iview 动态渲染表格(iview插件table)
效果图
（表格头部和表格主体都是动态渲染）
在这里插入图片描述
重要代码
（第一次使用csdn博客，如果有代码遗漏，评论我会回复哦！！?）

<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>