少用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修补。