关于前端:Vue-filter使用细节

这周遇到一个问题，业务找过去，说页面上有个数据的展现和预期的不一样。
举个例子，如下图所示，预期的无数据展现是"--"（蓝框中的款式），而红框中展现的款式是"-"。

咱们平台约定，无数据的中央，对立以"--"填充展现。

下面展现的场景是一个表格，表格中的每个table cell中的数据以百分比模式展现。
这里后端传过来的数据是浮点数模式，前端须要对数据的展现模式做解决。平台是一个vue2我的项目，容易想到用vue2提供的filter语法。
{{ data | filter }}
（注：vue3中曾经删除了filter语法，改用methods实现）

在具体实现上，我定义了一个名为formatToPencent的filter，封装在displayFilterMixin中，在用到的组件内按需引入mixin。关注重点formatToPencent的实现，以及为什么会变成"-"。

formatToPercent 的实现如下图所示，如果是undefined的状况，返回了"--"。

注：plusSign的作用是适配"33.5%"、 "+22.6%"的需要场景，负数默认不带"+"，如果须要带"+"，则传入plusSign = "+"。

剖析下来filter没有问题，也不会产生"-"。再回到应用filter的中央。
{{ ( data / 100) | formatToPercent }}
就是这里出了问题，data === undefined，data / 100 后果是NaN，进入了percentage内，percentage将NaN解决成了"-"。

到这里，解决问题有两种计划：
1、批改percentage，将NaN的处理结果变成"--"。
2、批改filter，将数据处理局部(data/100这一过程)放在undefined判断之后。

个人感觉NaN是一个预期之外的后果，用计划2更优。
批改formatToPercent，减少radio参数

用法上也须要批改
{{ data | formatToPercent("", 100) }}

问题解决，完结。

同步更新到语雀
https://www.yuque.com/diracke...