父组件
成都创新互联是一家专业提供柯城企业网站建设,专注与成都网站设计、成都做网站、外贸网站建设、H5页面制作、小程序制作等业务。10年已为柯城众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
定义表头和表内容
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.property]}} {{scope.row[scope.column.property]}} {{scope.row[scope.column.property]}}
scope.row和scope.column分别代表什么呢? 可以在界面输出看看
先输出scope.row
由此可见scope.row代表 当前行 的数据
再来输出scope.column
得到这样一个对象,仔细看看,我们可以发现一点门路
由此可见scope.column.property
代表 当前列的值
合并起来,当前单元格的值应该是scope.row[scope.column.property]
总结
以上所述是小编给大家介绍的vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
售后响应及时
7×24小时客服热线数据备份
更安全、更高效、更稳定价格公道精准
项目经理精准报价不弄虚作假合作无风险
重合同讲信誉,无效全额退款