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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
vue路由缓存的几种实现方式小结
Feb 02 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
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
ajax请求get与post的区别总结
2013/11/04 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
vue组件实例解析
2017/01/10 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
Python如何为图片添加水印
2016/11/25 Python
python实现淘宝秒杀脚本
2020/06/23 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
详解Python3定时器任务代码
2019/09/23 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
个人找工作的自我评价
2013/10/17 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
2014年征兵标语
2014/06/20 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
保送生自荐信
2015/03/06 职场文书
最美乡村教师观后感
2015/06/11 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android