src/views/payment/receipt-flow.vue

@@ -84,11 +84,13 @@
           </el-form-item>
         </div>
         <div class="receipt-flow-page__search-actions">
-          <el-button @click="searchExpanded = !searchExpanded">
-            {{ searchExpanded ? '折叠' : '展开' }}
-          </el-button>
           <el-button type="primary" @click="handleSearch">查询</el-button>
           <el-button @click="resetSearch">重置</el-button>
+          <el-tooltip :content="searchExpanded ? '折叠' : '展开'" placement="top">
+            <el-button text @click="searchExpanded = !searchExpanded">
+              <el-icon><component :is="searchExpanded ? ArrowUp : ArrowDown" /></el-icon>
+            </el-button>
+          </el-tooltip>
         </div>
       </el-form>
     </section>
@@ -265,6 +267,7 @@
 </template>
 
 <script>
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import { mapGetters } from 'vuex';
 import * as api from '@/api/payment/receiptFlow';
 import { receiptFlowTableColumns } from '@/option/payment/receiptFlow';
@@ -289,6 +292,8 @@ export default {
   name: 'ReceiptFlow',
   data() {
     return {
+      ArrowDown,
+      ArrowUp,
       query: emptyQuery(),
       claimStatusOptions: api.claimStatusOptions,
       pushStatusOptions: api.pushStatusOptions,