vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信


Posted in Javascript onAugust 15, 2019

父组件

定义表头和表内容

data(){
 return{
  // 表格数据
  tableColumns: [],
  // 表头数据
  titleData:[],
 }
}

引入并注册子组件

import TableComponents from "../../components/table/table";
//注册子组件table
components: {
  tableC: TableComponents
},

获取表头和表内容数据。(真实数据应该是从接口获取的,由于是测试数据这里我先写死)

mounted() {
  this.titleData = 
    [{
      name:'日期',
      value:'date'
    },{
      name:'姓名',
      value:'name'
    },{
      name:'地址',
      value:'address'
    },{
      name:'汇率',
      value:'sharesReturn'
    }];
  this.tableColumns = 
    [{
      date: '2016-05-01',
      name: '王小虎1',
      address: '上海市普陀区金沙江路 1518 弄',
      sharesReturn: 0.03
    }, {
      date: '2016-05-02',
      name: '王小虎2',
      address: '上海市普陀区金沙江路 1517 弄',
      sharesReturn: 0.04
    }, {
      date: '2016-05-03',
      name: '王小虎3',
      address: '上海市普陀区金沙江路 1519 弄',
      sharesReturn: -0.01
    }, {
      date: '2016-05-04',
      name: '王小虎4',
      address: '上海市普陀区金沙江路 1516 弄',
      sharesReturn: 0.00
    }];
}

html代码

<tableC :tableColumns="tableColumns" :titleData="titleData" ></tableC>

子组件

js代码

export default {
 name: 'tbComponents',
 props: ['tableColumns','titleData'],
}

重点来了

html要怎么写呢?官网的文档是这么写的

vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

el-table :data关联的是表格里的数据

el-table-column :prop关联的是表头的值 :label关联的是表头的文本

html动态渲染

<el-table :data="tableColumns" style="width: 100%">
 <el-table-column v-for="(item,key) in titleData" :key="key" :prop="item.value" 
  :label="item.name"></el-table-column>
</el-table>

效果如下:

vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

最后剩下一个功能,如果 汇率大于0,则显示红色,小于0则显示绿色

先贴上完整代码:

<el-table :data="tableColumns" style="width: 100%">
  <el-table-column v-for="(item,key) in titleData" :key="key" :prop="item.value" :label="item.name">
    <template slot-scope="scope">
     <span v-if="scope.column.property==='sharesReturn'&&scope.row[scope.column.property]>0" style="color:red">{{scope.row[scope.column.property]}}</span>
     <span v-else-if="scope.column.property==='sharesReturn'&&scope.row[scope.column.property]<0" style="color: #37B328">{{scope.row[scope.column.property]}}</span>
     <span v-else>{{scope.row[scope.column.property]}}</span>
    </template>
  </el-table-column>
</el-table>

scope.row和scope.column分别代表什么呢? 可以在界面输出看看

先输出scope.row

vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

由此可见scope.row代表 当前行 的数据

再来输出scope.column

vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

得到这样一个对象,仔细看看,我们可以发现一点门路

vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

由此可见scope.column.property代表 当前列的值

合并起来,当前单元格的值应该是scope.row[scope.column.property]

总结

以上所述是小编给大家介绍的vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
javascript解析json实例详解
Nov 05 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
解决vuex刷新状态初始化的方法实现
Aug 15 #Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 #Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 #Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 #Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 #Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 #Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 #Javascript
You might like
lib.utf.js
2007/08/21 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
JS 常用校验函数
2009/03/26 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
vue router2.0二级路由的简单使用
2017/07/05 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python3标准库总结
2019/02/19 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
浅析python 字典嵌套
2020/09/29 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
感恩的心主题班会
2015/08/12 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
如何优化vue打包文件过大
2022/04/13 Vue.js