fix: 复用组件

src/components/pc/BlockChainBrowser/TradeTable2.vue

@@ -12,7 +12,6 @@
     >
       <template slot="empty">
         <div>
-          <!-- <div class="loading-line"></div> -->
           <span v-if="!Loading && Trades.length === 0">
             {{ $t('lang.page.nodata') }}
           </span>
@@ -43,9 +42,6 @@
       <el-table-column :label="$t('lang.trade.hash')">
         <template slot-scope="item">
           <div>
-            <!-- <p class="group-title" v-if="item.row.tradeG === 2">
-              {{ $t('txDetail.groupTx') }}
-            </p> -->
             <router-link
               :to="`/tradeHash?hash=${item.row.hash}`"
               class="light flex-left text-footer-color"
@@ -142,13 +138,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
 import { tradeAccuracy } from '@/utils/common'
 import { Table, TableColumn } from 'element-ui'
 import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
 import TxStatus from '../txStatus.vue'
 import arrowRightBlue from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-blue.png'
 import arrowRightDark from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png'
+import { icustomized2Tx } from '@/types/trade'
 
 export default Vue.extend({
   components: {
@@ -162,7 +159,7 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
-    Trades: Array,
+    Trades: Array as PropType<icustomized2Tx[]>,
     Loading: Boolean,
     groupCellName: Function,
     pageChange: Function,

src/views/pc/trade.vue

@@ -28,8 +28,16 @@
           :total="pages.total"
         ></page-container>
       </div>
+      <TradeTable2
+        :Trades="txList"
+        :Loading="loading"
+        :groupCellName="groupCellName"
+        :pageChange="pageChange"
+        :sizeChange="sizeChange"
+        :pages="pages"
+      ></TradeTable2>
       <!-- 表格部分 -->
-      <el-table
+      <!-- <el-table
         :data="txList"
         stripe
         style="width: 100%;"
@@ -41,7 +49,6 @@
       >
         <template slot="empty">
           <div>
-            <!-- <div class="loading-line"></div> -->
             <span v-if="!loading && txList.length === 0">
               {{ $t('lang.page.nodata') }}
             </span>
@@ -73,9 +80,6 @@
         <el-table-column :label="$t('lang.trade.hash')">
           <template slot-scope="item">
             <div>
-              <!-- <p class="group-title" v-if="item.row.tradeG === 2">
-              {{ $t('txDetail.groupTx') }}
-            </p> -->
               <router-link
                 :to="`/tradeHash?hash=${item.row.hash}`"
                 class="light flex-left text-footer-color"
@@ -164,9 +168,9 @@
           </template>
         </el-table-column>
         <el-table-column width="40"></el-table-column>
-      </el-table>
+      </el-table> -->
       <!-- 底部分页 -->
-      <div class="bottom-page flex justify-end">
+      <!-- <div class="bottom-page flex justify-end">
         <page-container
           @pageChange="pageChange"
           @sizeChange="sizeChange"
@@ -174,7 +178,7 @@
           :pageSize="pages.pageSize"
           :total="pages.total"
         ></page-container>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -183,13 +187,21 @@ import VueTypedMixins from 'vue-typed-mixins'
 import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
 import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
 import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
+import TradeTable2 from '@/components/pc/BlockChainBrowser/TradeTable2.vue'
 import arrowRightBlue from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-blue.png'
 import arrowRightDark from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png'
 import Count from '@/components/pc/BlockChainBrowser/Count.vue'
 import tradeMixin from '@/mixin/trade'
 import TxStatus from '@/components/pc/txStatus.vue'
 export default VueTypedMixins(tradeMixin).extend({
-  components: { ChainSearch, PageContainer, Count, TradeTable, TxStatus },
+  components: {
+    ChainSearch,
+    PageContainer,
+    Count,
+    TradeTable,
+    TxStatus,
+    TradeTable2,
+  },
   data() {
     return {
       arrowRightBlue,