vue-admin HeaderSearch(表头搜索)组件修改

需求#

当点击表头的搜索框时，搜索订单管理中的某条订单，跳转至订单列表，并且展示对应的 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)
      }
    }
  }