vue-admin HeaderSearch(表頭搜尋)元件修改

ziming007發表於2020-09-17

需求

當點選表頭的搜尋框時,搜尋訂單管理中的某條訂單,跳轉至訂單列表,並且展示對應的tab

思路

1.設定表頭搜尋元件
2.路由跳轉至訂單列表
3.通過vuex管理搜尋的值
4.訂單列表監聽該值,設定搜尋條件,呼叫後臺介面.最後展示對應tab

實現

修改搜尋元件

1.1 進入src\components\HeaderSearch找到表頭搜尋元件,可以在原有搜尋元件基礎上更改,或者新建一個搜尋元件,如果為新建,需要在layout對應的表頭模組重新引入.為了書寫方便,我在這裡直接更改
TEMPLATE:

<el-input v-model="search" placeholder="請輸入訂單號或內部單號" class="header-search-select">
  <el-button slot="append" icon="el-icon-search" @click="searchOrder" />
</el-input>

SCRIPT:

data() {
    return {
      search: '' // 搜尋資訊
    }
  },
  methods: {
    // 搜尋訂單
    searchOrder() {
      this.$store.commit('header/setSearch', this.search) // 將資料放入vuex中管理
      // 判斷當前是否在訂單管理頁面,如果不在則跳轉
      if (this.$route.name !== 'OrderManagement') {
        // 開啟訂單頁面
        this.$router.push({
          name: 'OrderManagement'
        })
      }
    }
  }

實現效果:

在這裡插入圖片描述

使用vuex監控search的值

1.2.1 在src\store\modules中新建header.js vuex檔案,監控搜尋值

// 定義需要管理的狀態
const state = {
  search: '' // 搜尋的值
}
// 操作管理狀態中的資料
const mutations = {
  setSearch(state, payload) {
    state = Object.assign(state, {
      search: payload
    })
  }
}
// 非同步操作
const actions = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

1.2.2 開啟src\store\getters.js 輸出header中的 state,mutations
在getters中新增:

search: state => state.header.search

注意:

1.3.1 在state賦值時,不要直接寫成 state.search = payload,因為在後面使用計算屬性computed時,不會監聽到物件引導地址未改變的值.例如物件中key中value的變化.
1.3.2 namespaced名稱空間會對使用方法有所更改.詳情請看:扛麻袋的少年的部落格
blog.csdn.net/lzb348110175/article... 講的很詳細

3 .訂單列表監聽search的值變化,執行搜尋
3.1 引入vuex,獲取search值

import { mapState } from 'vuex'

// 計算屬性
  computed: {
    ...mapState({
      search: state => state.header.search // 執行賦值
    })
  },
  // 監聽
  watch: {
    search(newVal, oldVal) {
      if (newVal) {
        console.log(newVal)
      }
    }
  }