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 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
Javascript的一种模块模式
Sep 08 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
javascript动态创建链接的方法
May 13 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
浅谈JS的原型和原型链
Jun 04 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
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
详解使用python crontab设置linux定时任务
2016/12/08 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
Linux下多个Python版本安装教程
2018/08/15 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
大学生开西餐厅创业计划书
2014/02/01 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
信访稳定工作汇报
2014/10/27 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python