vue + element ui 实现实现动态渲染表格
前言：之前需要做一个页面，能够通过表名动态渲染出不同的表格，这里记录一下。转载请注明出处：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 实现实现动态渲染表格的更多相关文章
- vue+element ui 的tab 动态增减，切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- vue + element ui 表格自定义表头，提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 基于 vue+element ui 的cdn网站（多页面，都是各种demo）
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- 分享一个自搭的框架，使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
随机推荐
- 【洛谷4238】 多项式求逆（NTT，分治）
前言 多项式求逆还是爽的一批 Solution 考虑分治求解这个问题. 直接每一次NTT一下就好了. 代码实现 #include<stdio.h> #include<stdlib.h ...
- Git入门－－创建版本库，关联远程库，从远程库下载
1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...
- Linux - 更改软件源
镜像源 网易镜像源 在网易开源镜像页面,点击对应镜像名的使用帮助,可以查看到更新源的方法,按步骤操作即可. 阿里云镜像源 在阿里云开源镜像页面,点击对应Mirror分类的help标签,可以查看到更新源 ...
- MapReducer
MapReducer 概述 是一个分布式的计算框架(编程模型),最初由由谷歌的工程师开发,基于GFS的分布式计算框架.后来Cutting根据<Google Mapreduce ...
- 【LeetCode】128. 最长连续序列
题目 给定一个未排序的整数数组,找出最长连续序列的长度. 要求算法的时间复杂度为O(n). 示例: 输入:[100, 4, 200, 1, 3, 2] 输出:4 解释:最长连续序列是[1, 2, 3, ...
- MetaMask安装使用指南
1.MetaMask(轻钱包) MetaMask是一款在谷歌浏览器Chrome上使用的插件类型的以太坊钱包,该钱包不需要下载,只需要在谷歌浏览器或基于谷歌浏览器内核的其它浏览器(如:360极速浏览器- ...
- 集合框架_DAY17
1:五种数据结构: 数组:长度固定,有序,查找方便 链表:添加删除方便 栈:先进后出 队列:先进先出 树结构:完成排序动作 2:泛型(了解) (1)是一种把明确数据类型的工作推迟到创 ...
- Is it possible to display icons in a PopupMenu?
I really like the new PopupMenu we got in 3.0, but I just can't display any icons next to the menu i ...
- JavaScript -- 数组Array
-----021-ActiveXObject.html----- <!DOCTYPE html> <html> <head> <meta http-equiv ...
- redis集群报Jedis does not support password protected Redis Cluster configurations异常解决办法
解决spring-data-redis操作redis集群报“Jedis does not support password protected Redis Cluster configurations ...