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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
使用axios实现上传图片进度条功能
Dec 21 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 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
Look And Say 序列php实现代码
2011/05/22 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php rsa加密解密使用详解
2015/01/14 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python星号*与**用法分析
2018/02/02 Python
python实现顺序表的简单代码
2018/09/28 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Series和DataFrame使用简单入门
2019/11/13 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
总裁岗位职责
2013/12/04 职场文书
入党综合考察材料
2014/06/02 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏