前言：之前需要做一个页面，能够通过表名动态渲染出不同的表格，这里记录一下。转载请注明出处：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. ZJOI Round2游记

    虽然一试很惨但是二试还是要来玩一下的 Day 0 到余姚了,然后到余姚边上的宾馆住来下来 顺便一问老师们对边上是不是有什么误解-- 吃完晚饭就回宾馆颓了 话说半夜真刺激--住隔壁那一位手突然骨折了,本 ...

  2. [NOI2018]你的名字（后缀自动机+线段树合并）

    看到题目名字去补番是种怎么样的体验 我只会 \(68\) 分,打了个暴力.正解看了一会儿,发现跟 \([HEOI2016/TJOI2016]\) 字符串很像,用线段树合并维护 \(endpos\) 集 ...

  3. 【wireshark】插件开发（五）：C插件

    1. Wireshark对C插件的支持 每个解析器解码自己的协议部分, 然后把封装协议的解码传递给后续协议. 因此它可能总是从一个Frame解析器开始, Frame解析器解析捕获文件自己的数据包细节( ...

  4. 监督学习——决策树理论与实践（下）：回归决策树（CART）

    介绍 决策树分为分类决策树和回归决策树: 上一篇介绍了分类决策树以及Python实现分类决策树: 监督学习——决策树理论与实践(上):分类决策树          决策树是一种依托决策而建立起来的一种 ...

  5. C#：自定义函数

    将数组转成字符串 /// <summary> /// 将数组转成字符串 /// </summary> /// <param name="glue"&g ...

  6. JavaSE-序列化和反序列化

    什么是序列化,什么时候要进行序列化? 序列化就是一种用来处理对象流的机制,所谓对象流也就是将对象的内容进行流化,将数据分解成字节流,以便存储在文件中或在网络上传输. 我们在对java对象进行IO流操作 ...

  7. Android中Serializable和Parcelable序列化对象详解

    学习内容: 1.序列化的目的 2.Android中序列化的两种方式 3.Parcelable与Serializable的性能比较 4.Android中如何使用Parcelable进行序列化操作 5.P ...

  8. [原] ubuntu安装Fcitx输入法

    1.终端输入: sudo add-apt-repository ppa:wengxt/fcitx-nightly 按回车确认添加 2.sudo apt-get update 更新软件源 3.sudo ...

  9. 【Java初探实例篇01】——Java语言基础

    示例系列,将对每节知识辅以实际代码示例,通过代码实际编写,来深入学习和巩固学习的知识点. IDE:intellij IDEA: 语言:Java 本次示例:Java语言基础知识的应用. 创建包day_4 ...

  10. mysql 查找在另一张表不存在的数据

    有两个表Phone_book, Call: Phone_book +----+------+--------------+ | id | name | phone_number | +----+--- ...