前言：之前需要做一个页面，能够通过表名动态渲染出不同的表格，这里记录一下。转载请注明出处：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. Spring AOP 源码分析 - 创建代理对象

    1.简介 在上一篇文章中,我分析了 Spring 是如何为目标 bean 筛选合适的通知器的.现在通知器选好了,接下来就要通过代理的方式将通知器(Advisor)所持有的通知(Advice)织入到 b ...

  2. HttpInvokerUtils

    package com.sprucetec.tms.utils; import org.slf4j.Logger;import org.slf4j.LoggerFactory; import java ...

  3. git add .添加不成功

    情景: 我首先在一个有许多文件的文件夹中  git init  创建一个git管理仓库 之后 git add . 之后 git commit -m "提交" 发现提交不成功,文件没 ...

  4. 开发ASP.NET MVC 在线录音录像（音视频录制并上传）

    最近有个在线招聘录音的开发需求,需要在招聘网站上让招聘者上传录音和视频. 找到两个不错的javascript开源,可以在除了IE以外的浏览器运行. https://github.com/mattdia ...

  5. [Leetcode]146.LRU缓存机制

    Leetcode难题,题目为: 运用你所掌握的数据结构,设计和实现一个  LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key ...

  6. How to resize or create a thumbnail image from file stream on UWP

    最近在搞Ocr相关的windows universal app, 用到了一些图像处理相关的知识. 涉及到了BitmapDecoder/BitmapEncoder/IRandomAccessStream ...

  7. 在MVC3中使用富文本编辑器：KindEditor的配置及上传图片

    现在比较常用的富文本编辑挺多的,如ueditor.fckeditor.kingeditor等,本文主要介绍一下KindEditor的配置与使用. 先去官网http://www.kindsoft.net ...

  8. Linux发邮件

    一.mail命令 1.配置 vim /etc/mail.rc 文件尾增加以下内容  set from=1968089885@qq.com smtp="smtp.qq.com"set ...

  9. 广度优先遍历-BFS、深度优先遍历-DFS

    广度优先遍历-BFS 广度优先遍历类似与二叉树的层序遍历算法,它的基本思想是:首先访问起始顶点v,接着由v出发,依次访问v的各个未访问的顶点w1 w2 w3....wn,然后再依次访问w1 w2 w3 ...

  10. unittest单元测试框架简单说明

    unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果.今天笔者 ...