少用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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程