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

2019-08-15 admin

父组件

定义表头和表内容

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要怎么写呢?官网的文档是这么写的

clipboard.png

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>

效果如下:

clipboard.png

最后剩下一个功能,如果汇率大于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 clipboard.png 由此可见scope.row代表当前行的数据

再来输出scope.column

clipboard.png

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

clipboard.png

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

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

如有疑问欢迎大家一起讨论

[转载]原文链接:https://segmentfault.com/a/1190000020080971

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72564.html

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

相关文章
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回&quot;undefined&quot;:一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
好消息!好消息!饿了么ElementUI用户的福音——ElementUIVerify!
如果你受够了饿了么ElementUI原生的校验方式,那就来试试它吧! 前言 饿了么ElementUI虽好,但表单校验的体验不够理想 如果说产品开发要讲究用户体验,那插件开发也要讲究开发体验,而好的开发体验,要靠好的api设计来保障 本人专注...
2017-12-24
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
回到顶部