前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下。转载请注明出处: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. 【BZOJ3238】 [Ahoi2013]差异(SAM)

    传送门 BZOJ 洛谷 Solution SA版本的 考虑可以建一个SAM? 那么接下来我们就考虑每一对点对之间的贡献了. 把这个式子化简一下就是无序点对之间的那啥(自己意会一下) 然后我们定义边权为 ...

  2. 【洛谷4238】 多项式求逆(NTT,分治)

    前言 多项式求逆还是爽的一批 Solution 考虑分治求解这个问题. 直接每一次NTT一下就好了. 代码实现 #include<stdio.h> #include<stdlib.h ...

  3. 05_python_字典

    一.字典定义 字典是python中唯一的映射类型,以{ }括起来的键值对组成,在dict中key是唯一的.在保存时,根据key来计算一个内存地址,然后把key-value保存至地址中.这种算法是has ...

  4. Java知识锦囊

    最近突然想回顾一下之前的文章,回顾复习一下,正好把觉得还不错的文章收录到这里,方便查阅 Java 2018-04-02 Java计数器之CountDownLatch.CyclicBarrier.Sem ...

  5. java String 内存模型

    关于java的内存模型,参照以下的一篇文章: https://isudox.com/2016/06/22/memory-model-of-string-in-java-language/

  6. WebDriver高级应用实例(3)

    3.1自动化下载某个文件 被测网页的网址: https://pypi.org/project/selenium/#files Java语言版本的API实例代码 import java.util.Has ...

  7. 改变IIS的Framework版本

    Changing the Framework version requires a restart of the W3SVC service. Alternatively, you can chang ...

  8. CentOS 6(64-bit) + Nginx搭建静态文件服务器

    Nginx搭建静态文件服务器 使用命令打开Nginx配置文件: sudo vim /etc/nginx/conf.d/default.conf 将配置改为: server { ...... ..... ...

  9. 12-02 java String类

    String构造方法 package cn.itcast_01; /* * 字符串:就是由多个字符组成的一串数据.也可以看成是一个字符数组. * 通过查看API,我们可以知道 * A:字符串字面值&q ...

  10. PHP的语言构造器

    isset和empty看起来像是函数,我们也经常把它当作函数一样使用,但是实际上,它们是语言构造器. php中的语言构造器就相当于C中的预定义宏的意思,它属于php语言内部定义的关键词,不可以被修改, ...