vue 局部过滤 数组数据

业务需要是table展示多个地区以逗号隔开,而后台返回来是有null 的数据需要我们进行处理一下，

代码如下：

 <el-table-column>
 <template slot-scope="scope">
    		<!-- 这里是拿到数据展示 -->
          {{ scope.row.deptNameList | deptNameList}}
        </template>
 </el-table-column>

过滤器 是和methods和 data 平级的 位置一定要写对。

 //局部过滤数据 
  filters:{
    deptNameList(value){
    //第一种是精简的
     return  (value.filter(item=> item !== null)).toString() 
     //第二种是明了的
     const arr = value.filter(item=> item !== null)
     return  arr.toString()
    }
  },

效果如下：

还有一种就是根据后台返回的数字或者其他来展示汉字

//局部过滤数据 
  filters:{
    deptNameList(value){
    //这是判断返回是空的时候
   if(value == ""){
   return "汉字"
   }else{
	return value
}
//这是判断返回是null的时候
   if(value == null){
   return "汉字"
   }else{
	return value
}
//这是判断返回是数字的时候
   if(value == '1'){
   return "汉字"
   }else{
	return value
}
  },

总结：我这里是使用了局部过滤器，也可以设置全局的，因为需求就这么多就只有在当前使用了。记录自己遇到的问题也希望能帮助到你。