fix: 替换:key="index"，修复潜在缓存问题

src/components/advancedSearch/TagMode.vue

@@ -26,8 +26,8 @@
                 @change="(value) => selectColumn(value, meta)"
             >
               <el-option
-                  v-for="(column, index) in columnList"
+                  v-for="column in columnList"
-                  :key="index"
+                  :key="column.label"
                   :label="column.label"
                   :value="column.label"
               ></el-option>
@@ -57,8 +57,8 @@
                 @change="(value) => selectValue(value, meta)"
             >
               <el-option
-                  v-for="(code, i) in meta.doc.data"
+                  v-for="code in meta.doc.data"
-                  :key="i"
+                  :key="code.code"
                   :label="code.code"
                   :value="code.code"
               ></el-option>
@@ -116,8 +116,8 @@
         <div class="condition__operation-select" v-if="meta.operator.show && meta.operator.isEditing">
           <div
               class="condition__operation"
-              v-for="(operator, index) in operatorList"
+              v-for="operator in operatorList"
-              :key="index"
+              :key="operator"
               @click.stop="selectOperator(operator, meta)"
           >{{operator}}</div>
         </div>

src/components/advancedSearch/showhint/Hint/HintInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="HintInfo" id="myHint" @mouseenter="onMouseenter">
     <ul style="padding-left: 0;margin: -10px 0 0 0;min-width: calc(100% - 12px)">
-      <template v-for="(item,index) in hintList" :key="index">
+      <template v-for="(item,index) in hintList" :key="item.displayText">
         <li :ref="'hint_'+index" class="relative-item CodeMirror-hint"
             style="margin-bottom: 2px"
             @click="handleSelect(item,index,hintList)"

src/components/common/Pagination.vue

@@ -17,7 +17,7 @@
         <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="small"
                    :teleported="appendToBody" class="pagination-size-select" @change="size"
                    :popper-class="popClass" @visible-change="popperVisible">
-          <el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
+          <el-option v-for="item in pageSizes" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
 
       </el-pagination>

src/components/common/TimeLine.vue

@@ -4,7 +4,7 @@
       <el-slider v-model="currentTime" @change="onChange" :step="1" :max="timeLine.length>0?timeLine.length-1:99" :format-tooltip="formatTooltip"/>
     </div>
     <div class="time-line-container">
-      <div v-for="(item, index) in timeLine" :key="index">
+      <div v-for="item in timeLine" :key="item.time">
         <div v-if="item.showFlag" style="color: #666;">{{ item.time }}</div>
       </div>
     </div>

src/components/common/TimeRange/TimeRefresh.vue

@@ -11,7 +11,7 @@
     </span>
     <transition name="el-zoom-in-top">
       <div v-if="dropdownShow" class="refresh-list">
-        <div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
+        <div v-for="item in refreshArr" :key="item.label" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
           {{ item.label }}
           <i v-if="item.value===interval" class="cn-icon cn-icon-check"></i>
         </div>

src/components/layout/Header.vue

@@ -151,14 +151,14 @@
           <div class="middle-menus__header">{{ $t('overall.networkAnalytics') }}</div>
           <div class="middle-menus__body" v-if="networkAnalyticsMenu && networkAnalyticsMenu.children">
             <div style="width: 260px;">
-              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="index">
+              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="menu.name">
                 <div class="middle-menu" v-if="index < 5" @click="jump(menu.route,'','',2)">
                   {{ $t(menu.i18n || menu.name) }}
                 </div>
               </template>
             </div>
             <div>
-              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="index">
+              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="menu.name">
                 <div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">
                   {{ $t(menu.i18n || menu.name) }}
                 </div>
@@ -170,14 +170,14 @@
           <div class="middle-menus__header">{{ $t('overall.locationIntelligence') }}</div>
           <div class="middle-menus__body" v-if="locationIntelligenceMenu && locationIntelligenceMenu.children">
             <div style="width: 260px;">
-              <template v-for="(menu, index) in locationIntelligenceMenu.children" :key="index">
+              <template v-for="(menu, index) in locationIntelligenceMenu.children" :key="menu.name">
                 <div class="middle-menu" v-if="index < 5" @click="jump(menu.route,'','',2)">
                   {{ $t(menu.i18n || menu.name) }}
                 </div>
               </template>
             </div>
             <div>
-              <template v-for="(menu, index) in locationIntelligenceMenu.children" :key="index">
+              <template v-for="(menu, index) in locationIntelligenceMenu.children" :key="menu.name">
                 <div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">
                   {{ $t(menu.i18n || menu.name) }}
                 </div>

src/components/rightBox/report/ReportBox.vue

@@ -110,7 +110,7 @@
                 <template #append>{{$t('report.week')}}</template>
               </el-input>-->
               <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates">
-                <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
+                <el-checkbox v-for="item in weekdayList" :key="item.value" :label="item.value">{{$t(item.name)}}</el-checkbox>
               </el-checkbox-group>
             </div>
             <!-- 月 -->
@@ -134,7 +134,7 @@
                   <div class="enable-month-all">
                     <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')"/>
                     <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange">
-                      <el-checkbox v-for="(item, index) in monthList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
+                      <el-checkbox v-for="item in monthList" :key="item.value" :label="item.value">{{$t(item.name)}}</el-checkbox>
                     </el-checkbox-group>
                   </div>
                 </template>
@@ -163,7 +163,7 @@
                   <div class="enable-month-week">
                     <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large"/>
                     <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange">
-                      <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
+                      <el-checkbox v-for="item in weekdayList" :key="item.value" :label="item.value">{{$t(item.name)}}</el-checkbox>
                     </el-checkbox-group>
                   </div>
                 </template>
@@ -219,7 +219,7 @@
 <!--            <el-input v-model="param.value" placeholder=" " v-for="(param, index) in editObject.categoryParams" :key="index" size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
               <template #prepend>{{param.key}}</template>
             </el-input-number>-->
-            <template v-for="(param, index) in editObject.categoryParams" :key="index">
+            <template v-for="param in editObject.categoryParams" :key="param.key">
               <el-input-number v-if="param.labelType === 'input'" v-model="param.value" placeholder=" " class="report__params-vertical" :disabled="!!editObject.id">
                 <template #prepend>{{param.key}}</template>
               </el-input-number>

src/components/table/detection/RuleDefinition.vue

@@ -20,7 +20,7 @@
         <div class="form-setting__block margin-b-20">
           <div class="block-title">{{ $t('detection.create.dimensions') }}</div>
           <div class="block-dimension">
-            <div class="block-dimension-tag" v-for="(ite, ind) in dimensionList" :key="ind">{{ ite.label }}</div>
+            <div class="block-dimension-tag" v-for="ite in dimensionList" :key="ite.label">{{ ite.label }}</div>
           </div>
         </div>
 
@@ -37,7 +37,7 @@
         <div class="form-setting__block margin-b-20">
           <div class="block-title1">{{ $t('detections.filters') }}</div>
           <div class="definition-filter-block" v-if="showFilter">
-            <div class="definition-filter-item" v-for="(item, index) in thresholdRuleObj.filterList" :key="index">
+            <div class="definition-filter-item" v-for="(item, index) in thresholdRuleObj.filterList" :key="item.filter">
               <el-select class="filter-item__select margin-r-8" v-model="item.filter" placeholder=" ">
                 <el-option
                     v-for="item in selectList"
@@ -68,7 +68,7 @@
           <div class="block-title">{{ $t('detection.create.condition') }}</div>
 
           <el-form ref="form2" :model="thresholdRuleObj" label-position="top">
-          <div class="definition-condition-block" v-for="(item, index) in thresholdRuleObj.conditionData" :key="index">
+          <div class="definition-condition-block" v-for="(item, index) in thresholdRuleObj.conditionData" :key="item.level">
             <el-form-item :label="$t('detection.level')" :prop="`conditionData.${index}.level`" :rules="rules.level">
               <el-select class="condition__select margin-b-20" v-model="item.level" placeholder=" ">
                 <template #prefix>

src/components/table/report/ReportTable.vue

@@ -33,7 +33,7 @@
             <div class="expand">
               <loading :loading="loadingDown"></loading>
               <chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data>
-              <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
+              <div class="expand-cell" v-for="item in downDataList" :key="item.id">
                 <div class="expand-right">
                   <div class="demo-progress">
                     <el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)"

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -137,7 +137,7 @@
               <div class="bar-header-left">
                 <div class="bar-value-active"></div>
                 <div class="bar-value">
-                  <template v-for="(item, index) in tabs" :key="index">
+                  <template v-for="(item, index) in tabs" :key="item.name">
                     <div class="bar-value-tabs"
                          :class=" {'is-active': tabType === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                          @mouseenter="mouseenterTab(item)"

src/components/table/setting/knowledgeBaseTableForCard2.vue

@@ -138,7 +138,7 @@
               <div class="bar-header-left">
                 <div class="bar-value-active" ></div>
                 <div class="bar-value">
-                  <template v-for="(item, index) in tabs" :key="index">
+                  <template v-for="item in tabs" :key="item.name">
                     <div class="bar-value-tabs"
                          :class=" {'is-active': tabType === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                          @mouseenter="mouseenterTab(item)"

src/views/charts/charts/ChartMap.vue

@@ -7,7 +7,7 @@
           class="map-chart__legend"
           :class="`${currentLegendIndex === index ? 'map-chart__legend--active' : ''}`"
           v-for="(legend, index) in legends"
-          :key="index"
+          :key="item.name"
           @click="changeLegend(index)"
       >
         <div

src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue

@@ -9,7 +9,7 @@
                v-show="item.show"
                :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                v-for="(item, index) in tabs"
-               :key="index"
+               :key="item.name"
                @mouseenter="mouseenter(item)"
                @mouseleave="mouseleave(item)"
                @click="activeChange(item, index,true)">

src/views/charts2/charts/entityDetail/EntityDetailLine.vue

@@ -10,7 +10,7 @@
               <div class="line-value-tabs"
                    :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                    v-if="item.show"
-                   :key="index"
+                   :key="item.name"
                    @mouseenter="mouseenter(item)"
                    @mouseleave="mouseleave(item)"
                    @click="activeChange(item, index,true)"

src/views/charts2/charts/entityDetail/EntityDetailMap.vue

@@ -38,7 +38,7 @@
                     <div class="scroll-list" :style="`transform: translateY(${trackingSubscriber.startOffset}px)`">
                       <div class="scroll__item"
                            v-for="(record, index) in trackingSubscriber.trackRecords.slice(trackingSubscriber.scrollStartIndex, trackingSubscriber.scrollEndIndex)"
-                           :key="index"
+                           :key="item.time"
                            @mouseenter="timelineMouseEnter(trackingSubscriber, record)"
                            @mouseleave="timelineMouseLeave(trackingSubscriber, record)"
                       >

src/views/charts2/charts/entityDetail/lines/App.vue

@@ -9,7 +9,7 @@
             <div class="line-value-tabs"
                  :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                  v-if="item.show"
-                 :key="index"
+                 :key="item.name"
                  @mouseenter="mouseenter(item)"
                  @mouseleave="mouseleave(item)"
                  @click="activeChange(item, index,true)"

src/views/charts2/charts/entityDetail/lines/ServiceName.vue

@@ -9,7 +9,7 @@
             <div class="line-value-tabs"
                  :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                  v-if="item.show"
-                 :key="index"
+                 :key="item.name"
                  @mouseenter="mouseenter(item)"
                  @mouseleave="mouseleave(item)"
                  @click="activeChange(item, index,true)"

src/views/charts2/charts/entityDetail/tabs/AccountInformation.vue

@@ -10,7 +10,7 @@
           <span class="type-title-word">{{ $t('entities.tab.email') }}</span>({{ mailList.length }})
         </div>
         <div class="type-content">
-          <div v-for="(mail, index) in mailList.slice(0,showMailListInfo.num)" :key="index" class="data-item">
+          <div v-for="mail in mailList.slice(0,showMailListInfo.num)" :key="mail" class="data-item">
             {{ mail }}
           </div>
         </div>
@@ -27,7 +27,7 @@
           <span class="type-title-word">{{ $t('entities.tab.wetchat') }}</span>({{ wetchatList.length }})
         </div>
         <div class="type-content">
-          <div v-for="(wetchat, index) in wetchatList.slice(0,showWetchatListInfo.num)" :key="index" class="data-item">
+          <div v-for="(wetchat, index) in wetchatList.slice(0,showWetchatListInfo.num)" :key="wetchat" class="data-item">
             {{ wetchat }}
           </div>
         </div>

src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue

@@ -5,7 +5,7 @@
   <div v-if="!isNoData && !showError" class="entity-detail-event-block" style="height: 100%;width: 100%;position: relative;">
     <div class="behavior-pattern" >
       <div class="behavior-pattern-legend" >
-          <div class="behavior-pattern-legend__item" v-for="(data, index) in tableData" :key="index">
+          <div class="behavior-pattern-legend__item" v-for="(data, index) in tableData" :key="data.name">
             <div class="legend-icon" :style="`background:${chartColorForBehaviorPattern[index%10]};`"></div>
             <div class="legend-name">{{data.name}}</div>
             <div class="legend-value" >{{ valueToRangeValue(data.value, unitTypes.number).join('')}}</div>

src/views/charts2/charts/entityDetail/tabs/DeviceInformation.vue

@@ -10,7 +10,7 @@
           <span class="type-title-word">{{ $t('entities.tab.device') }}</span>({{ deviceList.length }})
         </div>
         <div class="type-content">
-          <div v-for="(device, index) in deviceList.slice(0,showDeviceListInfo.num)" :key="index" class="data-item">
+          <div v-for="(device, index) in deviceList.slice(0,showDeviceListInfo.num)" :key="device" class="data-item">
             {{ device }}
           </div>
         </div>

src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue

@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div v-for="(item, index) in infoList" :key="index" class="margin-t-20">
+      <div v-for="item in infoList" :key="item.name" class="margin-t-20">
         <div class="digital-certificate-body">
           <div class="digital-certificate-body-tags">
             <div :class="item.flag === '0' ? 'entity-tag entity-tag--level-two-negative-no-background' : 'entity-tag entity-tag--level-two-positive-no-background'">{{ this.$t(getTrusted(item.flag)) }}</div>
@@ -20,7 +20,7 @@
 
           <div class="digital-certificate-body-content">
             <div class="certificate-list-list">
-              <div v-for="(item1, index1) in item.data" :key="index1" class="certificate-list-item">
+              <div v-for="item1 in item.data" :key="item1.label" class="certificate-list-item">
                 <div class="certificate-list-item__label">{{ item1.label }}</div>
                 <div v-if="item1.type" :class="'entity-tag entity-tag--small entity-tag--level-one-' + item1.type">{{ item1.value }}</div>
                 <div v-else class="certificate-list-item__value">

src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue

@@ -16,7 +16,7 @@
                 v-show="item.show"
                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                 v-for="(item, index) in tabs"
-                :key="index"
+                :key="item.name"
                 @mouseenter="mouseenter(item)"
                 @mouseleave="mouseleave(item)"
                 @click="activeChange(item, index, true)"

src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue

@@ -75,7 +75,7 @@
               <div class="body__apps" :class="{'body__apps-no-grid': providerOptions.length === 0}">
                 <loading :loading="loadingBody"></loading>
                 <chart-no-data v-if="providerOptions.length === 0 && !loadingBody" test-id="noData"></chart-no-data>
-                <div class="body__app" v-else :class="{'provide-show': app.provideShow}" v-for="(app, index) in providerOptions" :key="index"  @click="appCheckedChange(app, 0)" :test-id="`provide${index}`">
+                <div class="body__app" v-else :class="{'provide-show': app.provideShow}" v-for="(app, index) in providerOptions" :key="app.value"  @click="appCheckedChange(app, 0)" :test-id="`provide${index}`">
                   <div class="body__app-content">
                     <div class="body__app-left">
                       <span><i class="cn-icon" :class="app.icon" :test-id="`provide-icon${index}`"></i></span>
@@ -95,7 +95,7 @@
               <div class="body__apps" :class="{'body__apps-no-grid': appOptions.length === 0}">
                 <loading :loading="loadingBody"></loading>
                 <chart-no-data v-if="appOptions.length === 0 && !loadingBody"></chart-no-data>
-                <div class="body__app" v-else :class="{'app-show': app.appShow}" v-for="(app, index) in appOptions" :key="index" @click="appCheckedChange(app, 1)" :test-id="`app${index}`">
+                <div class="body__app" v-else :class="{'app-show': app.appShow}" v-for="(app, index) in appOptions" :key="app.name" @click="appCheckedChange(app, 1)" :test-id="`app${index}`">
                   <div class="body__app-content">
                     <div class="body__app-left">
                       <span><i class="cn-icon" :class="app.icon" :test-id="`app-icon${index}`"></i></span>

src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue

@@ -9,7 +9,7 @@
             <div class="line-value-tabs"
                  :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                  v-if="item.show"
-                 :key="index"
+                 :key="item.name"
                  @mouseenter="mouseenter(item)"
                  @mouseleave="mouseleave(item)"
                  @click="activeChange(item, index,true)"

src/views/charts2/charts/npm/NpmAppCategoryScore.vue

@@ -4,13 +4,13 @@
 
     <div class="npm-app-left" v-if="!showError">
       <div class="npm-app-letter" :class="{'npm-app-letter-no-data': isNoData}">
-        <div v-for="(letter, index) in colorPatchData" :key="index">
+        <div v-for="letter in colorPatchData" :key="letter.letter">
           {{letter.letter}}
         </div>
       </div>
       <chart-no-data v-if="isNoData"></chart-no-data>
       <div class="npm-app-body" v-else>
-        <div class="npm-app-body-patch" v-for="(data, index) in tableData" :key="index">
+        <div class="npm-app-body-patch" v-for="(data, index) in tableData" :key="data.icon">
           <div class="npm-app-body-icon"><span><i :class="data.icon" :test-id="`iconContent${index}`"></i></span></div>
           <div class="npm-app-body-color" v-for="index2 in 6" :key="index2" :class="{'score-color': data.score >= index2}"></div>
         </div>
@@ -24,7 +24,7 @@
         height="100%"
         empty-text=" "
         v-if="!showError">
-      <template v-for="(item, index) in customTableTitles" :key="index">
+      <template v-for="item in customTableTitles" :key="item.label">
         <el-table-column class="data-column">
           <template #header>
             <span class="data-column__span" style="margin-left: -2px;">{{$t(item.label)}}</span>

src/views/charts2/charts/npm/NpmAppEventTable.vue

@@ -8,7 +8,7 @@
         :row-class-name="rowClassName"
         empty-text=""
     >
-      <template v-for="(item, index) in customTableTitles" :key="index">
+      <template v-for="(item, index) in customTableTitles" :key="item.label">
         <el-table-column class="data-column" :min-width="columnWidth(index)">
           <template #header>
             <span class="data-column__span">{{ $t(item.label) }}</span>

src/views/charts2/charts/npm/NpmEventsByType.vue

@@ -11,7 +11,7 @@
         <div class="npm-event-pie-legends">
           <div class="npm-event-pie-legend">
             <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
+            <template v-for="(legend, index) in chartData" :key="legend.name">
               <div class="npm-event-pie-legend-type">
                 <div :style="`width: 9px;height: 9px;background-color: ${legend.color};margin-right: 5px;`"></div>
                 <div class="npm-event-pie-legend-type-severity" :test-id="`testNode${index}`">{{legend.name}}</div>
@@ -20,7 +20,7 @@
           </div>
           <div class="npm-event-pie-legend">
             <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
-            <template v-for="(legend, index) in chartData" :key="index">
+            <template v-for="(legend, index) in chartData" :key="legend.name">
               <div class="npm-event-pie-legend-total" :test-id="`total${index}`">{{legend.value}}</div>
             </template>
           </div>

src/views/charts2/charts/npm/NpmLine.vue

@@ -9,7 +9,7 @@
         </div>
         <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !isNoData">
           <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData"
-               :key="index" @click="highlightEvent(item)">
+               :key="item.legend" @click="highlightEvent(item)">
             <div class="npm-line-header-icon" :class="'icon' + index"></div>
             <div class="npm-line-header-value">{{ item.legend }}</div>
           </div>

src/views/charts2/charts/npm/NpmRecentEvents.vue

@@ -12,7 +12,7 @@
         :class="{'npm-recent-table-ten': tableData.length === 10}"
         empty-text=""
     >
-      <template v-for="(item, index) in customTableTitles" :key="index">
+      <template v-for="item in customTableTitles" :key="item.label">
         <el-table-column class="data-column">
           <template #header>
             <span class="data-column__span">{{$t(item.label)}}</span>

src/views/detections/DetectionFilter.vue

@@ -2,7 +2,7 @@
   <div class="detection-filter-case">
     <div class="filter-case__header">{{$t('detections.filters')}}</div>
     <div class="no-data" v-if="isNoData">{{ $t('npm.noData') }}</div>
-    <template v-for="(filter, index) in filterData" :key="index">
+    <template v-for="(filter, index) in filterData" :key="filter.title">
       <div class="detection-filter" v-show="filter.data.length > 0 && filter.show">
         <div class="filter__header">{{filter.title}}</div>
 

src/views/detections/DetectionList.vue

@@ -12,11 +12,11 @@
               :detection="data"
               :page-type="pageType"
               :timeFilter="timeFilter"
-              :key="index"
+              :key="data.eventId"
               :pageObj="pageObj"
               :eventFlag="eventFlag"
               :ref="`detectionRow${index}`"
-              :index="index"
+              :index="data.eventId"
               @switchCollapse="switchCollapse"
               :q="q"
           ></detection-row>
@@ -29,7 +29,7 @@
               :page-type="pageType"
               :timeFilter="timeFilter"
               :eventFlag="eventFlag"
-              :key="index"
+              :key="data.eventId"
               :pageObj="pageObj"
               :ref="`detectionRow${index}`"
               :index="index"

src/views/detections/DetectionRow.vue

@@ -12,7 +12,7 @@
       <div class="cn-detection__row">
         <div class="cn-detection__header">
           <span class="detection-event-severity-block margin-l-16">{{ detection.eventName || '-' }}</span>
-          <div v-for="(item, index) in myDetection.keyList" :key="index">
+          <div v-for="(item, index) in myDetection.keyList" :key="item.key">
             <span class="detection-event-name">{{item.key}}</span>
             <span class="detection-event-key">({{ item.type }})</span>
             <span v-if="index < myDetection.keyList.length - 1" class="detection-event-line"></span>

src/views/detections/DetectionRowEvents.vue

@@ -15,7 +15,7 @@
           <div class="body__basic-info">
             <div class="basic-info new__basic-info">
               <div class="basic-info__item">
-                <span v-for="(item, index) in myDetection.keyList" :key="index">
+                <span v-for="(item, index) in myDetection.keyList" :key="item.key">
                   <span class="item__key">{{item.key}}</span>
                   <span class="item__key__type">({{ item.type }})</span>
                   <span v-if="index < myDetection.keyList.length - 1" class="detection-event-line"></span>

src/views/detections/overview/EventsTimeline.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="events-timeline">
     <div class="timeline__circle">
-      <div v-for="(item, index) in myTimeData" :key="index">
+      <div v-for="(item, index) in myTimeData" :key="item.statTime">
         <el-tooltip :content="changeTimestampToTime(item.statTime)" placement="top" effect="light">
           <div
               :class="index===activeCircle ? 'circle__item-active' : 'circle__item'"
@@ -12,7 +12,7 @@
     </div>
     <div class="timeline__line margin-l-30"></div>
     <div class="timeline-container margin-l-30" id="timeline-container">
-      <div v-for="(item, index) in timeLine" :key="index" :style="{width: item.isYear ? '5px' : 'auto'}">
+      <div v-for="item in timeLine" :key="item.time" :style="{width: item.isYear ? '5px' : 'auto'}">
         <div v-if="item.showFlag" :class="handleTransformClass(item.isYear)">{{ item.time }}</div>
       </div>
     </div>

src/views/entityExplorer/EntityFilter.vue

@@ -3,7 +3,7 @@
     <div class="filter-case__header">{{ $t('entities.filter1') }}</div>
 
     <div v-if="filterDataLength>0">
-      <div class="entity-filter" v-for="(item, index) in myFilterData" :key="index">
+      <div class="entity-filter" v-for="(item, index) in myFilterData" :key="item.title">
         <div v-if="item.data.length>0">
           <div class="filter__header">
             <i :class="item.icon"></i>

src/views/entityExplorer/entityGraph/GraphEntityList.vue

@@ -33,7 +33,7 @@
         </div>
 
         <div class="graph-list-content">
-          <div v-for="(item, index) in showList" :key="index">
+          <div v-for="(item, index) in showList" :key="item.vertex">
             <div class="graph-list-item-ip"><span @click="expandDetail">{{ item.vertex }}</span></div>
             <template v-if="$_.get(node, 'data.entityType', '') === 'ip'">
               <div class="graph-list-item-block">

src/views/entityExplorer/entityList/EntityList.vue

@@ -13,7 +13,7 @@
               :listMode="listMode"
               :keywordList="keywordList"
               :timeFilter="timeFilter"
-              :key="index"
+              :key="data.entityValue"
               :ref="`entityRow${index}`"
               :index="index"
               @switchCollapse="switchCollapse"
@@ -30,7 +30,7 @@
               :index="index"
               :listMode="listMode"
               :timeFilter="timeFilter"
-              :key="index"
+              :key="data.entityValue"
           ></entity-card>
         </div>
       </template>

src/views/entityExplorer/entityList/Row.vue

@@ -28,8 +28,8 @@
             </el-popover>
           </span>
           <span class="entity-detail entity-row-tag" :style="{'margin-top' : entityData.isRelated ? '4px':'1px'}">
-            <span v-for="(item, index) in levelTwoTags"
+            <span v-for="item in levelTwoTags"
-                  :key="index"
+                  :key="item.value"
                   class="entity-tag entity-tag--small margin-r-10 margin-b-10"
                   :class="`entity-tag--level-two-${item.type}`"
                   :style="getTagColor(item.color)">

src/views/entityExplorer/entityList/detailOverview/App.vue

@@ -91,7 +91,7 @@
             <loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
           </div>
 
-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataOne" :key="item.value">
             {{item.value}}
           </div>
           <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
@@ -99,7 +99,7 @@
           <div v-if="relationshipShowOne">
             <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
             <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
-              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
+              <div class="popover-content" v-for="item in relationshipDataOne" :key="item.value">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
               </div>
             </div>
@@ -115,7 +115,7 @@
             <loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
           </div>
 
-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataTwo" :key="item.value">
             {{item.value}}
           </div>
           <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
@@ -123,7 +123,7 @@
           <div v-if="relationshipShowTwo">
             <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
             <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
-              <div v-for="(item, index) in relationshipDataTwo" :key="index">
+              <div v-for="item in relationshipDataTwo" :key="item.value">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
               </div>
             </div>
@@ -144,7 +144,7 @@
         <div class="row__label row__label--width130">{{$t('entities.recentAlert')}}</div>
         <div class="row__content">{{entityData.performanceNum}}</div>
       </div>
-      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="performance in entityData.performanceList" :key="performance.startTime">
         <div class="row__label row__label--width130">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
         <div class="row__content row__content--width90">
           <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(performance)}`">{{performance.eventSeverity}}</div>
@@ -171,7 +171,7 @@
         <div class="row__content">{{entityData.securityNum}}</div>
       </div>
 
-      <div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="security in entityData.securityList" :key="security.startTime">
         <div class="row__label row__label--width130">{{security.startTime ? dateFormatByAppearance(Number(security.startTime)) : '-'}}</div>
         <div class="row__content row__content--width90">
           <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(security)}`">{{security.eventSeverity}}</div>

src/views/entityExplorer/entityList/detailOverview/Domain.vue

@@ -97,7 +97,7 @@
             <loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
           </div>
 
-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataOne" :key="item.value">
             {{item.value}}
           </div>
           <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
@@ -105,7 +105,7 @@
           <div v-if="relationshipShowOne">
             <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
             <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
-              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
+              <div class="popover-content" v-for="item in relationshipDataOne" :key="item.value">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
               </div>
             </div>
@@ -119,7 +119,7 @@
           <div v-if="loadingRelationshipTwo" class="relationship-two__loading">
             <loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
           </div>
-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataTwo" :key="item.value">
             {{item.value}}
           </div>
           <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
@@ -127,7 +127,7 @@
           <div v-if="relationshipShowTwo">
             <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
             <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
-              <div v-for="(item, index) in relationshipDataTwo" :key="index">
+              <div v-for="item in relationshipDataTwo" :key="item.value">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
               </div>
             </div>
@@ -148,7 +148,7 @@
         <div class="row__label row__label--width130">{{$t('entities.recentAlert')}}</div>
         <div class="row__content">{{entityData.performanceNum}}</div>
       </div>
-      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="performance in entityData.performanceList" :key="performance.startTime">
         <div class="row__label row__label--width130">{{performance.startTime ? dateFormatByAppearance(Number(performance.startTime)) : '-'}}</div>
         <div class="row__content row__content--width90">
           <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(performance)}`">{{performance.eventSeverity}}</div>

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -132,7 +132,7 @@
             <loading :loading="loadingRelationshipOne" size="small" class="one__loading"></loading>
           </div>
 
-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataOne" :key="item.value">
             {{item.value}}
           </div>
           <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
@@ -140,7 +140,7 @@
           <div v-if="relationshipShowOne">
             <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp">...</div>
             <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
-              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
+              <div class="popover-content" v-for="item in relationshipDataOne" :key="item.value">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
               </div>
             </div>
@@ -155,7 +155,7 @@
             <loading :loading="loadingRelationshipTwo" size="small" class="one__loading"></loading>
           </div>
 
-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="item in relationshipDataTwo" :key="item.value">
             {{item.value}}
           </div>
           <div v-if="relationshipDataTwo.length===0 && !loadingRelationshipTwo">-</div>
@@ -163,7 +163,7 @@
           <div v-if="relationshipShowTwo">
             <div class="data-item show-more-related" id="related-domain-more" @click.stop="showMoreDomain">...</div>
             <div v-if="isShowMoreDomain" class="domain-popover_block" id="showRelatedDomain">
-              <div v-for="(item, index) in relationshipDataTwo" :key="index">
+              <div v-for="(item, index) in relationshipDataTwo" :key="item.value">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
               </div>
             </div>
@@ -184,7 +184,7 @@
         <div class="row__label row__label--width130">{{$t('entities.recentAlert')}}</div>
         <div class="row__content">{{entityData.performanceNum}}</div>
       </div>
-      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="performance.startTime">
         <div class="row__label row__label--width130">{{performance.startTime ? dateFormatByAppearance(Number(performance.startTime)) : '-'}}</div>
         <div class="row__content row__content--width90">
           <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(performance)}`">{{performance.eventSeverity}}</div>
@@ -211,7 +211,7 @@
         <div class="row__content">{{entityData.securityNum}}</div>
       </div>
 
-      <div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
+      <div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="security.startTime">
         <div class="row__label row__label--width130">{{security.startTime ? dateFormatByAppearance(Number(security.startTime)) : '-'}}</div>
         <div class="row__content row__content--width90">
           <div class="alert-level-tag" :class="`alert-level-tag--${iconClass(security)}`">{{security.eventSeverity}}</div>

src/views/entityExplorer/entityList/detailOverview/Subscriber.vue

@@ -65,7 +65,7 @@
             <loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
           </div>
 
-          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
+          <div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="item.value">
             {{item.value}}
           </div>
           <div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
@@ -73,7 +73,7 @@
           <div v-if="relationshipShowOne">
             <div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
             <div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
-              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
+              <div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="item.value">
                 <span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
               </div>
             </div>