vue中三目运算符结合find函数做逻辑判断

map find 三目运算符

需求

• 在做一个表格的展示时，后端返回的数据是code，不是具体的名称，如下图所示
  

• 所以这里我准备用一个简单的三目运算判断表格展示内容

  • 首先，对应code和任务名称为：

  code	task
  1	黑白名单
  2	入侵检测
  3	徘徊检测
  4	接打手机

  • 展示结果为
    

vue中具体步骤：

• 在data中定义字段headerData，里面是我们要展示的表格行名称;字段tableData,存放返回的数据处理后的结果，用于模板中展示。

   headerData:[
           {
             name:'摄像头',
             width:40
           },
           {
             name:'黑白名单',
           },{
             name:'入侵检测',
           },
           {
             name:'徘徊检测',
           },{
             name:'接打手机',
           }
         ],
   tableData:[],
  

• 在methods中axios请求数据，在拿到的结果中，map遍历每一个元素，返回处理后的结果 ，推到tableData中。

  this.axios.get("url").then((res) => {
          res.data.data.map((item) => {
            return this.tableData.push({
              name: item.camera_name,
              //intercept,invade,wander,mobile分别对应表头四个任务名
              intercept:item.codes.find((item) =>{return item == 1})?"是":"否",
              invade:item.codes.find((item) =>{return item == 2})?"是":"否",
              wander:item.codes.find((item) =>{return item == 3})?"是":"否",
              mobile:item.codes.find((item) =>{return item == 10})?"是":"否"
            })
          })
          console.log(this.tableData);
        }).catch((error) => {
          console.log(error);
        })
  

• 注意：
  • find()函数不改变原数组，会执行回调函数返回一个布尔值，参数是数组的每一个元素，遍历数组如果有符合条件的结果，函数返回true，否则返回false。
  • 三目运算符使用场景很灵活，有时可以代替循环来处理数据。