vue element 中的table动态渲染实现(动态表头)


Posted in Javascript onNovember 21, 2019

通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头。通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据。

子组件table中template模板

<el-table 
  :data="this.tableData"
  height="400px" 
  max-height="400px" 
  size="small"
  row-class-name="row"
  cell-class-name="column"
  :row-style="setRowStyle"
  :cell-style="setColumnStyle"
  :highlight-current-row="true"
  @cell-click="cellClick"
  fit
  >
  <el-table-column
    v-for="(item, index) in tableLabel"
    :key="index" 
    :prop="item.prop" 
    :width="item.width" 
    :label="item.label">
  </el-table-column>
</el-table>

接收父组件传过来的数据

props: {
 tableData: { // 父组件传递过来的表格数据
    type: Array,
    default: []
  },
  tableLabel: { // 父组件传递过来的表头数据
    type: Array,
    default: () => {
      return []
    }
  }
}

父组件

<file-table 
 :tableData="tableData"
 :tableLabel="tableLabel"
>
</file-table>


data() {
 return {
 // 子组件的表格数据
 tableData: [
  {id: 1, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 2, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 3, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 4, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 5, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 6, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 7, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 8, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 9, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 10, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 11, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 12, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05}
 ],
 // 子组件的表头数据
 tableLabel: [
      {label: '', width: '40', prop: 'id'},
      {label: '日期', width: '', prop: 'date'},
      {label: '销售量', width: '', prop: 'sales'},
      {label: '销售额', width: '', prop: 'sale'},
      {label: '成本', width: '', prop: 'const'},
      {label: '利润', width: '', prop: 'profit'}
    ]
 }
}

问题:这种方式只能在一个组件中动态渲染,但是当我们需要操作每一列数据的时候,没法操作,因为element table再带的方法是每个单元格点击事件,而不符合我们需求,如何能实现表格动态渲染,并且每个组件都能使用,还能够实现操作的可控的列,下节分享。

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

Javascript 相关文章推荐
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
javascript每日必学之封装
Feb 23 Javascript
JS实现简单抖动效果
Jun 01 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 #Javascript
webpack常用构建优化策略小结
Nov 21 #Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 #Javascript
js实现课堂随机点名系统
Nov 21 #Javascript
JavaScript实现简单随机点名器
Nov 21 #Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 #Javascript
Vue实现按钮级权限方案
Nov 21 #Javascript
You might like
基于empty函数的输出详解
2013/06/17 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
分享一个常用的Python模拟登陆类
2015/03/29 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
会计专业应届生求职信
2013/11/24 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
校园广播稿500字
2014/02/04 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL