vue filters - Debug

vue filters - Debug

需求： iview table组件中某一列需要根据需求过滤。

<Table border="" stripe="" max-height="600" ref="current-table" :data="tableData" :columns="tableColumns"
       :loading="tableLoading" @on-selection-change="handleSelect">
    <!-- 部署状态 -->
    <template slot-scope="{ row, index }" slot="machine_status">
        <span>{{ row.machine_status | machineStatus }}</span>
    </template>
</Table>

machine_status字段如果匹配machineStatusList这个数组中value字段的话，显示数组中label字段。machineStatusList数组如下：

filters:

1. 错误示范

   filters: {
       machineStatus(val) {
           console.log("渲染");  // 1
           that.machineStatusList.forEach( (item, index) => {
               if (val === item.value) {
                   console.log(item.label);  // 2
                   return item.label;  // 3
               } else {
                   return "" + index;  // 4
               }
           })
           return val;  // 5
       }
   },
   

2. 正确示范

   filters: {
   	machineStatus(val) {
   	    return (that.machineStatusList.find( item => val === item.value) || {}).label;
   	}
   },
   

总结：

在错误示范中：最终会发现，1、2、5会走，为什么在forEach循环中return无效呢？？

这是因为forEach不会中断循环的原因，所以导致内部代码return无效。换成find去遍历即可。