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 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
jquery不常用方法汇总
Jul 26 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
解决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
php设置session值和cookies的学习示例
2014/03/21 PHP
php计算年龄精准到年月日
2015/11/17 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
JS中Attr的用法详解
2017/10/09 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python Tkinter版学生管理系统
2019/02/20 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
社会保险接收函
2014/01/12 职场文书
学校万圣节活动方案
2014/02/13 职场文书
幼儿园老师寄语
2014/04/03 职场文书
商场周年庆活动方案
2014/08/19 职场文书
2014年保洁工作总结
2014/11/24 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python