前言：之前需要做一个页面，能够通过表名动态渲染出不同的表格，这里记录一下。转载请注明出处：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. 《AngularJS深度剖析与最佳实践》笔记: 第二章 概念介绍

    第二章 概念介绍 2.1 什么是UI? 用户界面包括内容(静态信息+动态信息), 外观, 交互. 在前端技术栈中分别由HTML, CSS和JS负责. 进一步抽象, 分别对应于MVC三个主要部分: Mo ...

  2. 关于 kali linux

    2.更新系统:首先更换一个速度快点的国内源(1) lsb_release -a先看你的版本,是Rolling还是其他什么(2) leafpad /etc/apt/sources.list(源的默认文件 ...

  3. Javascript如何避免连续调用中取到不存在的属性而导致报TypeError错？

    背景: 在最近的 NODEJS 项目中,涉及到数据库的查询,回调函数里返回了查询结果,我这样做处理然后返回给前端: return results.collect_coupon[0].count 但是这 ...

  4. centos7 完整配置openvpn详情教程

    1. 什么是OpenVpn OpenVPN 是一个用于创建虚拟专用网络加密通道的软件包,最早是由James Yonan编写的.OpenVPN允许创建的VPN使用公开密钥.电子证书.或者用户名/密码来进 ...

  5. gulp的安装以及使用详解，除了详细还是详细

    安装gulp: 1. 创建本地包管理环境: 使用npm init命令在本地生成一个package.json文件,package.json是用来记录你当前这个项目依赖了哪些包,以后别人拿到你这个项目后, ...

  6. redis常用命令（一）

    一.redis常见的数据操作命令 http://redisdoc.com/ 二.键(key) keys *: 查询所有的key. exists key:判断某个key是否存在. move key db ...

  7. Git使用、Git配置、Git提交代码、Git上传

    非教程,只是自己的一个简单笔记.建议没有入门的朋友,直接看git的官方help文档: https://help.github.com/articles/set-up-git 1.注册一个git账号,超 ...

  8. odoo开发环境搭建(一）：安装VMware Workstation

    odoo开发环境搭建(一):安装VMware Workstation

  9. Mysql 索引原理及优化

    本文内容主要来源于互联网上主流文章,只是按照个人理解稍作整合,后面附有参考链接. 一.摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引 ...

  10. android(java) 开发过程中经验及总结记录

    android(java) 开发过程中经验及总结记录