vue-element-admin 侧边栏计数标记

原创已于 2022-12-26 21:48:04 修改 · 1.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-12-26 21:41:19 首次发布

前端学习之旅专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue项目中实现侧边栏的动态计数器功能，包括利用Vuex存储后台数据、条件渲染计数器及在不同场景下更新数据的方法。

效果图

在这里插入图片描述

具体步骤：

1、store/modules下新建文件apply.js（根据具体业务命名），将后台拉取的数据通过vuex存储
例：

import { searchSealApply } from '@/api/seal'

const state = {
  applyTotal: undefined
}

const mutations = {
  SET_APPLY_TOTAL: (state, applyTotal) => {
    state.applyTotal = applyTotal
  }
}

const actions = {
  // 根据自己实际情况获取后台数据
  getApply({ commit, state }) {
    return new Promise((resolve, reject) => {
      const req = {
        statusList: [1]
      }
      searchSealApply(1, 1, req).then(response => {
        const data = response.data.total

		// 将获取的数据存储
        commit('SET_APPLY_TOTAL', data)

        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

store/getters.js中声明

const getters = {
...
applyTotal: state => state.apply.applyTotal,
...
}

2、layout/components/Sidebar/item.vue中修改渲染

 if (title) {
 	  // 要加计数器的侧边栏名称
      if (title === '我的申请') {
        // 判断计数器的数如果不存在或者为0则不显示
        if (store.getters.applyTotal !== undefined && store.getters.applyTotal !== 0) {
          const num = store.getters.applyTotal
          vnodes.push(
            <span slot='title'>
              {(title)}
              // 注意这里不要使用el-badge标签，要使用html原生标签
              <sup class='el-badge__content el-badge__content--undefined'>{(num)}</sup>
            </span>
          )
        } else {
          vnodes.push(<span slot='title'>{(title)}</span>)
        }
      } else {
        vnodes.push(<span slot='title'>{(title)}</span>)
      }
    }

别忘记引入store

import store from '@/store'

3、在合适的地方获取后台数据
如果需要数据更新，则可以在src/permission.js中，每次路由跳转的时候去获取一次
例：

if (hasToken) {
    if (to.path === '/user/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
    ...
    // 在这里取拉取数据
    await store.dispatch('apply/getApply')
   	...
    }
}

如果只需要拉取一次，则在login后获取一次即可。
当然你也可以在每次用户操作完页面重新拉取数据的时候，更新applyTotal的全局状态，这样你的侧边栏计数标记就是动态的。

参考文档：http://t.csdn.cn/JSw4y

如有错误，请指正。