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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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的远程图片抓取函数分享
2013/09/25 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
python实现简单温度转换的方法
2015/03/13 Python
Python金融数据可视化汇总
2017/11/17 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
python贪吃蛇游戏代码
2020/04/18 Python
python爬虫中多线程的使用详解
2019/09/23 Python
Python定义一个函数的方法
2020/06/15 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
简单说说tomcat的配置
2013/05/28 面试题
运动会广播稿300字
2014/01/10 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
明确岗位职责
2015/02/14 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS