前言：之前需要做一个页面，能够通过表名动态渲染出不同的表格，这里记录一下。转载请注明出处：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. java中身份证号和的银行卡的深度校验

    一: 身份证号: package com.mobile.utils; import java.text.SimpleDateFormat; import java.util.Calendar; imp ...

  2. php5.3新垃圾回收机制详解

    php的垃圾回收机制主要参考了http://blog.csdn.net/phpkernel/article/details/5734743 这文章. 变量对应的值,比如 $a="abc&qu ...

  3. VNC远程连接阿里云Linux服务器 图形界面

    VNC 简介: VNC,全称:Virtual Network Computing,即虚拟网络计算机:分客户端和服务端,即VNC Viewer和VNC Server.它是一款远程控制的软件,一般用于远程 ...

  4. 常用处理数据用法es6 语法糖总结

    一 循环(数组 ,集合)   1 forEach-----------可以遍历得到vaue和index   const arr = ['red', 'green', 'blue'];arr.forEa ...

  5. (转)csv — 逗号分隔值文件格式

    原文:https://pythoncaff.com/docs/pymotw/csv-comma-separated-value-files/125 csv 模块主要用于处理从电子数据表格或数据库中导入 ...

  6. java重点知识

    一.java基本知识点 java是由SUN公司在1995年推出的,在2009年SUN公司又被甲骨文公司收购,所以甲骨文公司获得java版权.其底层是由C语言写的,java分为三个体系: JavaSE, ...

  7. STL简洁 && c++读取cfg文件

    在c++工程中,往往需要修改一些变量来实现不同的功能效果,这是cfg文件的使用可以使得工程更加高效与便利,这篇文章介绍的就是c++读取cfg文件的相关内容,以便及时总结和日后回顾. STL即标准模板库 ...

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

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

  9. Ruby：多线程队列(Queue)下载博客文章到本地

    Ruby:多线程下载博客文章到本地的完整代码 #encoding:utf-8 require 'net/http' require 'thread' require 'open-uri' requir ...

  10. VS2013编译的exe独立运行在XP中方案

    转载知乎 现在,我们深入探讨一下:<如何使用VS 2013发布一个可以在Windows XP中独立运行的可执行文件>. 这个问题是比较常见且容易造成初学者困惑的,作为曾经撞了无数次南墙的初 ...