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

supernavy 发布于2019-08-26 10:48 / 1803人阅读

摘要：父组件定义表头和表内容表格数据表头数据引入并注册子组件注册子组件获取表头和表内容数据。

父组件

定义表头和表内容

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代码

子组件

js代码

export default {
  name: "tbComponents",
  props: ["tableColumns","titleData"],
}

重点来了
html要怎么写呢？官网的文档是这么写的

el-table :data关联的是表格里的数据
el-table-column :prop关联的是表头的值 :label关联的是表头的文本

html动态渲染

效果如下：

最后剩下一个功能，如果汇率大于0，则显示红色，小于0则显示绿色

先贴上完整代码：

scope.row和scope.column分别代表什么呢？可以在界面输出看看
先输出scope.row

由此可见scope.row代表当前行的数据

再来输出scope.column

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

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

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

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

超融合服务器 idc机房托管 vue父子组件通讯父子组件-动态渲染父子组件通信父子组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106797.html

vue封装element-ui的table组件,灵活配置表头实现表格内编辑，按钮，链接等功能。

摘要：一封装的组件定义表格高度全屏增加前台分页功能。表格内编辑后，自动选中该行。单元格内数据样式单元格内按钮，可多个。触发组件绑定函数，参数按钮名称，按钮样式，按钮事件标识。单元格是否可点击的判断函数，可进行复杂的函数判断。 vue-bxz-table 一、封装element-ui的table组件：定义表格高度全屏增加前台分页功能。自定义表头，循环输出整体表结构。表格内编辑（输入框...

henry14 2019-08-26 13:30 评论0 收藏0
vue中表头 th 合并单元格，且表格列数不定的动态渲染方法

摘要：吐槽今天，在中遇到复杂表格的渲染，需要合并表头的单元格，且合并单元格的那列的表头数据是动态数据，也就是不知道会有多少个表头列，而这几个表头列还分了好几个子表头。吐槽今天，在vue中遇到复杂表格的渲染，需要合并表头th的单元格，且合并单元格的那列的表头数据是动态数据，也就是不知道会有多少个表头列，而这几个表头列还分了好几个子表头。这个需求在js里用Juicer模板很好做的，思路...

zombieda 2019-08-05 15:22 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

godlong_X 2019-08-05 18:13 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 评论0 收藏0