前言：之前需要做一个页面，能够通过表名动态渲染出不同的表格，这里记录一下。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9786326.html

网站地址：我的个人vue+element ui demo网站

github地址：yuleGH github

代码如下：

<html>

<head>

    <title>动态渲染整个表格</title>

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">

</head>

<body>

<div id="app">

    <p style="color: red;">动态根据表名，渲染整个表格，使用组件；这里没用联网，所以就一个简单的静态页面</p>

    <el-row style="margin-bottom: 20px">

        <el-col :span="3">

            <el-button type="primary" @click="handleSelectTable(0)">查询表1</el-button>

        </el-col>

        <el-col :span="3">

            <el-button type="primary" @click="handleSelectTable(1)">查询表2</el-button>

        </el-col>

        <el-col :span="3">

            <el-button type="primary" @click="handleSelectTable(2)">查询表3</el-button>

        </el-col>

    </el-row>

    <table-component ref="tableRef" :table-columns="tableColumns"></table-component>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="../lib/vue.js"></script>

<script type="text/javascript" src="../lib/elementui/index.js"></script>

<!--表格组件，需要分页-->

<div id="tableComponentApp">

    <div>

        <el-table

                :data="pageData"

                border

                style="width: 100%">

            <el-table-column

                    v-for="(item, index) in tableColumns"

                    :prop="item.prop"

                    :label="item.label"

                    :key="item.id"

                    sortable

                    show-overflow-tooltip

            >

            </el-table-column>

        </el-table>

    </div>

</div>

</div>

<script type="text/javascript">

    const tableComponent = {

        template: window.document.getElementById("tableComponentApp").innerHTML,

        data: function () {

            return {

                pageData: []

            }

        },

        props: {

            tableColumns: {

                type: Array,

                required: true

            }

        },

        methods: {

        }

    };

</script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

            idStr : "",

            printStr : "",

            tableColumnArray:[

                [

                    {id: "id", prop: "id", label: "id：唯一标识"},

                    {id: "userName", prop: "userName", label: "userName：用户名"}

                ],

                [

                    {id: "bookName", prop: "bookName", label: "bookName: 书名"},

                    {id: "price", prop: "price", label: "price: 价格"}

                ],

                [

                    {id: "createTime", prop: "createTime", label: "createTime: 创建时间"},

                    {id: "address", prop: "address", label: "address: 地址"},

                    {id: "email", prop: "email", label: "email: 邮件"}

                ]

            ],

            tableDataArray:[

                [

                    {id: "1", userName: "xiaohua"},

                    {id: "2", userName: "小明"}

                ],

                [

                    {bookName: "大话设计模式", price: "56"},

                    {bookName: "算法导论", price: "156"},

                    {bookName: "一本书", price: "35"}

                ],

                [

                    {createTime: "2018-10-14", address: "sdf", email: "sdfsd@yule.com"}

                ]

            ],

            tableColumns : []

        },

        components: {

            'table-component': tableComponent

        },

        methods: {

            handleSelectTable(index){

                this.tableColumns = this.tableColumnArray[index];

                this.$refs.tableRef.pageData = this.tableDataArray[index];

            }

        }

    });

</script>

</body>

</html>

转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9786326.html

vue + element ui 实现实现动态渲染表格的更多相关文章

  1. vue+element ui 的tab 动态增减，切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  2. vue + element ui 表格自定义表头，提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  3. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  4. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  5. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  6. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  7. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  8. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  9. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

随机推荐

  1. Docker学习笔记——制作容器与容器概念

    Docker能做些什么? 1.docker能够解决虚拟机能够解决的问题 2.隔离应用依赖 3.创建应用镜像并复制 4.创建容易分发的即启即用的应用 5.docker的想法是创建软件程序可移植的轻量容器 ...

  2. 【CJOJ2375】 【HZOI 2015】偏序 II（cdq分治，树状数组）

    传送门 CJOJ Solution 具体实现参考上一篇Blog(四维偏序) 代码实现1(cdq+cdq+cdq+BIT) /* mail: mleautomaton@foxmail.com autho ...

  3. C语言实现简单CMDShell

    1.首先使用vc6编译器编译后门,并运行 #pragma comment(lib,"ws2_32.lib") #ifdef _MSC_VER #pragma comment( li ...

  4. C#6.0语言规范(八) 语句

    C#提供了各种语句.大多数这些语句对于使用C和C ++编程的开发人员来说都很熟悉. statement : labeled_statement | declaration_statement | em ...

  5. centos7搭建kafka集群-第二篇

    好了,本篇开始部署kafka集群 Zookeeper集群搭建 注:Kafka集群是把状态保存在Zookeeper中的,首先要搭建Zookeeper集群(也可以用kafka自带的ZK,但不推荐) 1.软 ...

  6. 【sping揭秘】9、容器内部事件发布（二）

    写在前面---------------------------------- 命运多舛,痴迷淡然 不知下一步该往哪里走,现在应该是我的迷茫期... 加油,快点走出去!!! 聪明的网友们,你们有没有迷茫 ...

  7. 再学Java 之 interface的成员变量

    前言:最近在学多线程,写“哲学家就餐问题(Dining Philosophers)”的时候,需要定义一个全局的变量,即哲学家的人数.常用的做法是在其中一个类中定义一个static final的变量,然 ...

  8. Microsoft Azure Storage架构分析

    Microsoft云存储服务分为两个部分,SQL Azure和Azure Storage.云存储系统的可扩展性和功能不可兼得,必须牺牲一定的关系数据库功能换取可扩展性.Microsoft实现云存储的思 ...

  9. 【nodejs】文件上传demo实现

    文件结构: index.js var server = require('./server.js'); var router = require('./router.js'); var request ...

  10. JVM（一）JVM的概述与运行流程

    1.基本概念 JVM和普通虚拟机: 大家常用的两种虚拟机是VMWare和Visual Box,用来操作cpu指令. JVM是程序自己独立的运行环境,对堆栈.寄存器.字符码指令等操作. Java.JRu ...