vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019-08-15 13:58
2687 查看
父组件
定义表头和表内容
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要怎么写呢?官网的文档是这么写的
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>
效果如下:
最后剩下一个功能,如果 汇率大于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
由此可见scope.row代表 当前行 的数据
再来输出scope.column
得到这样一个对象,仔细看看,我们可以发现一点门路
由此可见scope.column.property
代表 当前列的值
合并起来,当前单元格的值应该是scope.row[scope.column.property]
总结
以上所述是小编给大家介绍的vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"
- vue中父子组件通过props传递数据,页面加载完毕,父组件数据更新,子组件不动态更新的解决方案
- Android列表组件ListView使用详解之动态加载或修改列表数据
- Angular2父子组件之间数据传递:父子组件共享服务通信
- Vue 父子组件的数据传递、修改和更新
- 浅谈vue单一组件下动态修改数据时的全部重渲染
- vue中父子组件通信,异步数据传递
- vue单一组件下动态修改数据时的全部重渲染
- Vue笔记2 父子组件的数据通信
- 【原】.Net创建Excel文件(插入数据、修改格式、生成图表)的方法
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- [置顶] easyUI 动态生成表头,与动态绑定数据,实现代码
- WeX5向data组件动态添加数据格式
- 如何在QML应用中动态修改ListModel中的数据并存储它为JSON格式
- Net使用Microsoft.Office.Interop.Excel;创建Excel文件(插入数据、修改格式、生成图表)的方法,以及Excel查看加密
- Vue 父子组件的数据传递、修改和更新方法
- 如何给父子ID结构的数据,动态生成layerorder
- vue.js父子组件通信动态绑定的实例
- 【原】.Net创建Excel文件(插入数据、修改格式、生成图表)的方法 .
- vue组件间通信、数据传递(父子组件,同级组件)