热更新

pages/component/commonComponents/list.vue

@@ -1,12 +1,18 @@
 <template>
   <view style="width: 100%; height: 100%">
-    <scroll-view  @scrolltolower="lower" scroll-y="true" class="scroll-Y" v-if="dataList.length > 0"  style="height: 100%">
+    <scroll-view
+      @scrolltolower="lower"
+      scroll-y="true"
+      class="scroll-Y"
+      v-if="dataList.length > 0"
+      style="height: 100%"
+    >
       <view
-        @click="gotoDetail(item,index)"
+        @click="gotoDetail(item, index)"
         class="scroll-view-item list_item"
         v-for="(item, index) in dataList"
-        :key="item.id"
-        :index="index"
+        :key="indexKey ? item[indexKey] : item.id"
+        :index="indexKey ? item[indexKey] : index"
         style="align-items: flex-start"
       >
         <view
@@ -16,7 +22,13 @@
           <slot name="leftSlot" :row="item" :item="item" :index="index"> </slot>
 
           <template v-if="isCondition">
-            <slot name="labelSlot" :row="item" :rowIndex="index"></slot>
+            
+            <slot
+              name="labelSlot"
+              :row="item"
+              :rowIndex="index"
+            
+            ></slot>
           </template>
           <template v-else>
             {{ item[label] }}
@@ -32,11 +44,12 @@
         ></image>
       </view>
     </scroll-view>
-    <u-empty  v-else-if="noDataIcon&&isLoadingHide"
-        :mode="noDataIcon"
-        :icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
->
-</u-empty>
+    <u-empty
+      v-else-if="noDataIcon && isLoadingHide"
+      :mode="noDataIcon"
+      :icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
+    >
+    </u-empty>
     <u-divider v-else text="暂无数据哦~"></u-divider>
   </view>
 </template>
@@ -44,7 +57,16 @@
 <script>
 import { mapState } from "vuex";
 export default {
-  props: ["dataList", "label", "isCondition", "isNoIcon","pagination",'noDataIcon','isLoadingHide'],
+  props: [
+    "indexKey",
+    "dataList",
+    "label",
+    "isCondition",
+    "isNoIcon",
+    "pagination",
+    "noDataIcon",
+    "isLoadingHide",
+  ],
   data() {
     return {};
   },
@@ -57,13 +79,13 @@ export default {
     ...mapState(["userInfo"]),
   },
   methods: {
-    lower(){
-      this.$emit('lower')
+    lower() {
+      this.$emit("lower");
     },
-    gotoDetail(data,index) {
+    gotoDetail(data, index) {
       console.log("index at line 53:", data);
 
-      this.$emit("hancleClick", data,index);
+      this.$emit("hancleClick", data, index);
     },
   },
   onBackPress() {
@@ -132,7 +154,7 @@ export default {
 /deep/.scroll-view-item:nth-child(2n-1) {
   background-color: transparent !important;
 }
-.list_item:last-child{
+.list_item:last-child {
   border-bottom: none !important;
 }
 </style>