xxx (array, str) {
     var index = array.findIndex(item => item.id=== str)
     // var index = array.indexOf(str)  // 當(dāng)數(shù)組里的對象為字符串時(shí)用這個(gè)方法更簡單
     return index  // -1 說明array中不存在id為str的對象
}

判斷對象是否包含某個(gè)屬性,el-table formatter判斷

當(dāng)前的業(yè)務(wù)邏輯是表格中大概有四五個(gè)字段需要判斷，如果是null或者0就返回暫無數(shù)據(jù)，有值的話就返回對應(yīng)的值，如下圖：

由于需要進(jìn)行的操作是一樣的，所以用一個(gè)formatter就可以了，所以要判斷對應(yīng)的字段，代碼如下：

1.表格部分

<el-table-column
  label="報(bào)送數(shù)量"
  prop="vulWarnNum"
  width="140"
  align="center"
  :formatter="dataFormat"
/>

2.方法體部分

dataFormat(row, column) {
      const field = column.property
      if (Object.prototype.hasOwnProperty.call(row, field)) {
        if (row[field] == null || row[field] === 0) {
          return '暫不要求'
        }
      }
      return row[field]
    }

其中Object.prototype.hasOwnProperty.call(row, field)就是判斷row中是否包含對應(yīng)的字段名稱

原先的寫法是

row.hasOwnProperty(field)

現(xiàn)在換成

Object.prototype.hasOwnProperty.call(row, field)

但是報(bào)錯(cuò) ESLint: Do not access Object.prototype method 'hasOwnProperty' from target object.(no-prototype-builtins)

所以最好是從 Object.prototype 調(diào)用這些方法

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中兩種路由模式的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了vue中兩種路由模式的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下
2023-08-08
vue mounted 調(diào)用兩次的完美解決辦法
在開發(fā)中發(fā)現(xiàn)其中一個(gè)頁面moutned調(diào)用了兩次，而其他頁面正常，表示很懵逼，然后查找原因，終于找到了，其實(shí)歸根到底是要知道m(xù)ounted的調(diào)用機(jī)制問題。這篇文章主要介紹了vue mounted 調(diào)用兩次的解決辦法,需要的朋友可以參考下
2018-10-10
vue3?中?computed?新用法示例小結(jié)
這篇文章主要介紹?vue3?中?computed?的新用法，對比?vue2?中的寫法，讓您快速掌握?vue3?中?computed?的新用法，對函數(shù)式寫法，options?寫法相關(guān)知識感興趣的朋友一起看看吧
2021-11-11
vue滾動固定頂部及修改樣式的實(shí)例代碼
這篇文章主要介紹了vue滾動固定頂部及修改樣式，本文給大家提到了滾動固定位置有多種方法,感興趣的朋友跟隨小編一起看看吧
2019-05-05
elementUI使用el-upload上傳文件寫法及避坑總結(jié)(上傳圖片/視頻到本地/服務(wù)器及回顯+刪除)
upload上傳是前端開發(fā)很常用的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于elementUI使用el-upload上傳文件寫法及避坑的相關(guān)資料,包括上傳圖片/視頻到本地/服務(wù)器及回顯+刪除,需要的朋友可以參考下
2023-03-03
vue中ref實(shí)現(xiàn)子向父傳值的示例
本文主要介紹了vue中ref實(shí)現(xiàn)子向父傳值的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
Vue Element前端應(yīng)用開發(fā)之用戶管理模塊的處理
本篇隨筆以權(quán)限管理模塊中的用戶管理為媒介，進(jìn)行相關(guān)功能的介紹和界面設(shè)計(jì)的處理。
2021-05-05
vue項(xiàng)目啟動如何設(shè)置默認(rèn)啟動頁
這篇文章主要介紹了vue項(xiàng)目啟動如何設(shè)置默認(rèn)啟動頁問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
關(guān)于Vue源碼vm.$watch()內(nèi)部原理詳解
這篇文章主要介紹了關(guān)于Vue源碼vm.$watch()內(nèi)部原理詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue解決彈出蒙層滑動穿透問題的方法
這篇文章主要介紹了vue解決彈出蒙層滑動穿透問題的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09