vue字符串展示不同信息用逗号分隔

效果图 

 

原始图

 

 直接上代码

//表格数据   
 <el-table-column
        prop="fItemDetail"
        header-align="center"
        align="center"
        label="检测项目"
        width="180px">
          <template slot-scope="scope">
          <span>
              {{scope.row.fItemDetail | changeItem}} //方法
          </span>
          </template>
      </el-table-column>




//方法区域

  export default {
    data(){
        return{ a:''}
        },
     methods: {},

    filters: {
                  //各项目之间分割（空格+逗号+空格）
          changeItem:function (value){//value操作的值
            //判断不为null
            if (value != null && value != '' && value != undefined) {
              var b=''
              var a=value.split(" ")//截取
              for (let i = 0; i <a.length; i++) {//循环获取
                if (a[i]!==null&&a[i]!==''&&a[i]!==undefined){//排除空格干扰，去右值的数据
                  if (i===(a.length-1)){//去除末尾逗号
                    b+=a[i]
                    continue                 //结束循环
                  }
                    b+=a[i]+' '+','+' '
                }
              }
              return b                        //返回结果
            }else {
              return '-'                        //value不存在
            }
          }
    
    
        }