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面向对象之Javascript 继承
May 04 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
javascript实现评分功能
Jun 24 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
原生js+canvas实现验证码
Nov 29 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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
基于python实现高速视频传输程序
2019/05/05 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python可以用来做什么
2020/11/23 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
实体的生命周期
2013/08/31 面试题
个人实用简单的自我评价
2013/10/19 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
继承权公证书范本
2015/01/23 职场文书
乐山大佛导游词
2015/02/02 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
Go语言入门exec的基本使用
2022/05/20 Golang