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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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
php垃圾代码优化操作代码
2010/08/05 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
详解PHP数组赋值方法
2015/11/07 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
Python字符串和字典相关操作的实例详解
2017/09/23 Python
详解django三种文件下载方式
2018/04/06 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
董事长秘书职责
2014/01/31 职场文书
借款协议书
2014/04/12 职场文书
学校文明单位申报材料
2014/05/06 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
社区结对共建协议书
2016/03/23 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Python预测分词的实现
2021/06/18 Python