少用formatter
2021/8/5 6:09:52
本文主要是介绍少用formatter,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
少用formatter
问题
数据库表中添加了新字段,需要在页面表格中展示。该字段原始数据为字典表code值,写后端时偷懒没有进行转换。打算在前端<el-table-column>
组件上绑定一个formatter
,将字典值转换成可读文字形式。
//... <el-table-column :formatter = "demoFormatter()"/> //... demoFormatter(row){ let item = this.demoOptions.find(item=>return item.code===row.code) return item.name } //...
结果,因为旧的数据对应的新字段没有及时赋值,导致formatter
报错了,控制台一堆undefined
,并且导致整个表格都不显示数据了。
解决过程
首先修改了formatter
demoFormatter(row){ let item = this.demoOptions.find(item=>return item.code===row.code) let str = '' item?str = item.name:"" return str }
反思
前端代码逻辑一定不能想当然地去写,后端传过来的值并不可靠,该考虑的异常情况最好能考虑到。最好将数据处理封装好直接绑到页面上,不管是在后端还是前端处理,而不是靠后期的各种formatter
修补。
这篇关于少用formatter的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南