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 相关文章推荐
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 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下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
javascript闭包入门示例
2014/04/30 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Python操作MySQL数据库9个实用实例
2015/12/11 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
高中英语教学反思
2014/02/04 职场文书
平安建设实施方案
2014/03/19 职场文书
销售岗位职责范本
2014/06/12 职场文书
安全教育第一课观后感
2015/06/17 职场文书