这篇文章主要介绍了vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信,需要的朋友可以参考下
父组件
定义表头和表内容
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则显示绿色
先贴上完整代码：
<span>0" style="color:red">{{scope.row[scope.column.property]}}</span><span v-else-if="scope.column.proper<i>本文来源gaodai$ma#com搞$代*码*网</i>ty==='sharesReturn'&&scope.row[scope.column.property]{{scope.row[scope.column.property]}}</span><span>{{scope.row[scope.column.property]}}</span>
scope.row和scope.column分别代表什么呢？ 可以在界面输出看看
先输出scope.row
由此可见scope.row代表 当前行 的数据
再来输出scope.column
得到这样一个对象，仔细看看，我们可以发现一点门路
由此可见scope.column.property代表 当前列的值
合并起来，当前单元格的值应该是scope.row[scope.column.property]
总结
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
转载请注明原文链接：vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
