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命名空间会对使用方法有所更改.详情请看:扛麻袋的少年的博客
https://blog.csdn.net/lzb348110175/article/details/89387495 讲的很详细

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)
      }
    }
  }
测试

3.2.1 输入数据
在这里插入图片描述

3.2.2 使用vue谷歌插件,监控vuex数据变化

在这里插入图片描述

我们可以看到vuex中的数据已经发生变化
在这里插入图片描述

同时,我们打印的console也能直观的看出改变

在这里插入图片描述

结语

其实,刚开始我一直想直接通过检测 route 中params的值来达到搜索订单的目的,但是路由的值并不能实时的监控到,还要思考如何重新挂载等等问题.最后还是尝试使用vuex来监控搜索的数据,虽然是第一次正经用vuex,但是还是深深的感受到了vuex的妙处.

如果觉得我上面的方法有错误或者需要改进的地方,请各位大佬指正 ^ - ^

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 关于vue-element-admin的抽屉组件,我可以回答。抽屉组件是Vue-Element-Admin中一种常见的UI组件,通常用于在界面上打开一个侧边栏,展示与当前页面相关的信息或操作。抽屉组件通常由一个触发按钮和一个侧边栏组成,在点击触发按钮后,侧边栏会从页面的侧边滑出,显示出其中的内容。这个组件在Vue-Element-Admin中的使用也比较简单,只需要在相应的页面组件中引入抽屉组件,然后在template中使用即可。 ### 回答2: vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统框架。其中的抽屉组件是一种常见的界面元素,以便在用户点击某个触发按钮时,将一个侧边栏或抽屉式的面板从屏幕边缘展开。下面是关于 vue-element-admin 的抽屉组件的一些特点和用法。 首先,vue-element-admin 的抽屉组件支持多种触发方式,包括按钮点击、链接点击、图标点击等。通过简单的配置即可实现不同的触发效果。 其次,抽屉组件可以在页面内的任何位置进行配置,并且可以自定义属性,比如宽度、位置等。这样可以根据实际需求,将抽屉组件放在不同的区域展示,并具有灵活的布局。 另外,抽屉组件还支持多种动画效果,比如淡入淡出、滑动等。这些效果可以通过简单的配置进行设置,使页面展示更加流畅和动感。 在使用方面,只需在模板中调用抽屉组件的标签,并设置相应的属性和事件,就可以实现抽屉的展开和关闭操作。同时,可以结合其他组件和数据进行交互,实现更加复杂的功能。 总之,vue-element-admin 的抽屉组件提供了一种简单、灵活的方式来实现抽屉式的界面效果,可以方便地用于后台管理系统的开发。无论是在布局美观性还是交互体验上,都具有很高的可定制性和扩展性。 ### 回答3: vue-element-admin是一个基于Vue.js和Element UI的后台管理系统模板,它提供了丰富的组件和功能,包括抽屉组件(Drawer)。 抽屉组件是vue-element-admin中常用的一个组件,用于实现侧边栏的展开和收缩功能。在vue-element-admin中,抽屉组件通常用于显示左侧菜单栏,在点击菜单项时展开或收缩对应的子菜单。 抽屉组件的主要特点有: 1. 支持多级菜单:抽屉组件可以嵌套使用,实现多级菜单的展开和收缩。 2. 可配置性强:通过配置数据源,可以自定义菜单项的文本、图标、路径等属性,灵活地适应不同的需求。 3. 用户友好的交互效果:在抽屉组件中,菜单项的展开或收缩通过动画效果呈现,使用户操作更加流畅,并且可以通过点击菜单项外的区域来关闭抽屉,提供更好的用户体验。 4. 状态管理灵活:抽屉组件采用Vue.js的响应式数据机制,在抽屉展开或收缩时,组件会自动更新状态,例如更新菜单项的选中状态。 要在vue-element-admin中使用抽屉组件,首先需要在代码中导入抽屉组件,然后根据需要进行配置和使用。例如,可以通过v-for指令循环遍历菜单项,动态生成抽屉中的菜单,并通过点击事件监听菜单项的点击事件,实现展开子菜单或跳转到对应页面的功能。 总之,vue-element-admin的抽屉组件是一个功能强大且灵活的组件,可以帮助开发者快速实现后台管理系统中的菜单展开和收缩功能,提供良好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值