vue如何判斷數(shù)組中的對(duì)象是否包含某個(gè)值
更新時(shí)間：2022年08月09日 11:53:18 作者：mfylove
這篇文章主要介紹了vue如何判斷數(shù)組中的對(duì)象是否包含某個(gè)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
判斷數(shù)組中的對(duì)象是否包含某個(gè)值
xxx (array, str) {
var index = array.findIndex(item => item.id=== str)
// var index = array.indexOf(str) // 當(dāng)數(shù)組里的對(duì)象為字符串時(shí)用這個(gè)方法更簡單
return index // -1 說明array中不存在id為str的對(duì)象
}
判斷對(duì)象是否包含某個(gè)屬性,el-table formatter判斷
當(dāng)前的業(yè)務(wù)邏輯是表格中大概有四五個(gè)字段需要判斷，如果是null或者0就返回暫無數(shù)據(jù)，有值的話就返回對(duì)應(yīng)的值，如下圖：
由于需要進(jìn)行的操作是一樣的，所以用一個(gè)formatter就可以了，所以要判斷對(duì)應(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中是否包含對(duì)應(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)按鈕文字動(dòng)態(tài)改變
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
結(jié)合el-upload組件實(shí)現(xiàn)大文件分片上傳功能
Element UI的el-upload上傳組件相信各位小伙伴都已經(jīng)非常熟悉，最近接了一個(gè)新需求，要求在el-upload組件基礎(chǔ)上實(shí)現(xiàn)分片上傳功能，即小于等于5M文件正常上傳，大于5M文件切成5M每片上傳,那么這個(gè)功能怎么實(shí)現(xiàn)呢?一起看看吧2022-09-09
這篇文章主要為大家介紹了c++游戲教程使用easyx實(shí)現(xiàn)大飛機(jī)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue3+elementui-plus實(shí)現(xiàn)無限遞歸菜單示例代碼
這篇文章主要介紹了vue3+elementui-plus實(shí)現(xiàn)無限遞歸菜單,當(dāng)一個(gè)組件的 key 值發(fā)生變化時(shí),Vue 會(huì)認(rèn)為這是一個(gè)新的組件實(shí)例,會(huì)強(qiáng)制重新創(chuàng)建和渲染這個(gè)組件,本文通過示例代碼詳細(xì)講解,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了VSCode使用之Vue工程配置eslint，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue配置文件實(shí)現(xiàn)代理v2版本的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了如何使用RoughViz可視化Vue.js中的草繪圖表，幫助大家更好的理解和使用roughViz，感興趣的朋友可以了解下2021-01-01
本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue使用elementUI組件實(shí)現(xiàn)分頁效果
分頁在展示數(shù)據(jù)列表的場景肯定是非常多的,一般的項(xiàng)目開發(fā)中,數(shù)據(jù)量特別大,一般都是后端接口直接處理分頁返回,前端直接調(diào)用即可,本文給大家介紹了vue使用elementUI組件實(shí)現(xiàn)分頁效果,需要的朋友可以參考下2023-12-12