首页 ›  文章

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

2019-08-15

父组件

定义表头和表内容

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]

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

原文链接:segmentfault.com

上一篇:truffle-workflow-compile
下一篇:Vue+webpackDevMiddleware+TypeScript
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入