Vue动态生成表格的行和列


Posted in Javascript onJuly 18, 2019

当在开发项目的时候,固定的页面表格标题及内容不能满足需求,需要根据不同的需求动态加载不同的表格表头和表格的内容,具体的实现代码如下:

<template>
 <div class="boxShadow">
 <div style="margin-top: 20px">
 
 <el-table
 :data="tables"
 ref="multipleTable"
 tooltip-effect="dark"
 style="width: 100%"
 @selection-change='selectArInfo'>
 <el-table-column type="selection" width="45px"></el-table-column>
 <el-table-column label="序号" width="62px" type="index">
 </el-table-column>
 <template v-for='(col) in tableData'>
  <el-table-column
  sortable
  :show-overflow-tooltip="true"
  :prop="col.dataItem"
  :label="col.dataName"
  :key="col.dataItem"
  width="124px">
  </el-table-column>
 </template>
 <el-table-column label="操作" width="80" align="center">
  <template slot-scope="scope">
  <el-button size="mini" class="del-com" @click="delTabColOne()" ><i class="iconfont icon-shanchu"></i></el-button>
  </template>
 </el-table-column>
 </el-table>
 
 
 </div>
 </div>
 
</template>
<script>
 import '../../assets/css/commlist.css'
 import '../../assets/css/commscoped.sass'
 export default {
 data () {
 return {
 tables: [{
  xiaoxue: '福兰',
  chuzhong: '加芳',
  gaozhong: '蒲庙',
  daxue: '西安',
  yanjiusheng: '西安',
  shangban: '北京'
 }, {
  xiaoxue: '南坊',
  chuzhong: '礼泉',
  gaozhong: '礼泉',
  daxue: '西安',
  yanjiusheng: '西安',
  shangban: '南坊'
 }, {
  xiaoxue: '马山',
  chuzhong: '加芳',
  gaozhong: '蒲庙',
  daxue: '西安',
  yanjiusheng: '重庆',
  shangban: '北京'
 }],
 tableData: [{
  dataItem: 'xiaoxue',
  dataName: '小学'
 }, {
  dataItem: 'chuzhong',
  dataName: '初中'
 }, {
  dataItem: 'gaozhong',
  dataName: '高中'
 }, {
  dataItem: 'daxue',
  dataName: '大学'
 }, {
  dataItem: 'yanjiusheng',
  dataName: '研究生'
 }, {
  dataItem: 'shangban',
  dataName: '上班'
 }]
 }
 },
 methods: {
 // 获取表格选中时的数据
 selectArInfo (val) {
 this.selectArr = val
 }
 }
 }
</script>

实现的效果如下图所示,这个只是一个小的简单示例,表格的数据都是写死的,在我们的项目开发的过程中,我们需要根据自己的开发需求去调用相应的接口,实现相应的表格内容。

Vue动态生成表格的行和列

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
js动态创建标签示例代码
Jun 09 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
vue通过数据过滤实现表格合并
Nov 30 #Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 #Javascript
小程序分页实践之编写可复用分页组件
Jul 18 #Javascript
在vue项目中使用sass语法问题
Jul 18 #Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 #Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 #Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 #Javascript
You might like
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
基于jQuery选择器的整理集合
2013/04/26 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
js代码实现轮播图
2020/05/04 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Python的净值数据接口调用示例分享
2016/03/15 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python模块future用法原理详解
2020/01/20 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
个人评价范文分享
2014/01/11 职场文书
学习雷锋标语
2014/06/25 职场文书
联谊活动总结
2014/08/28 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
解除处分决定书
2015/06/25 职场文书
如何写新闻稿
2015/07/18 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle