element+vue 之 v-limit 按钮操作权限

1.新建一个permission.js文件

import store from '@/store'

export default {
  inserted: function (el, binding) {
    const { perms: limits } = store.state.user
    const { value: params } = binding

    if (!limits.length) return

    if (params && Array.isArray(params)) {
      if (!limits.some(limit => params.includes(limit))) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(` format: v-limit="[ 'system:user:resetPwd' ]"`)
    }
  }
}

2.新建一个user.js 文件 存储用户权限标识集合

export default {
  state: {
    perms: JSON.parse(localStorage.getItem("perms")) || [], // 用户权限标识集合
    messageList: [], // 站内信header列表显示
    total: 0 // 站内信header显示
  },
  getters: {

  },
  mutations: {
    setPerms (state, perms) { // 用户权限标识集合
      localStorage.setItem("perms",JSON.stringify(perms))
      state.perms = perms
    },
    SET_MESSAGE_TOTAL (state, val) {
      
      state.total = val
    },
    SET_MESSAGE_LIST (state, val) {
      state.messageList = val
    }
  },
  actions: {
    GET_MESSAGE_LIST ({commit}, Form) {
      // selectMessage(Form).then(res => {
      //   // 
      //   // if (res.data.code === 200) {
      //   //   commit('SET_MESSAGE_LIST', res.data.data.list)
      //   //   commit('SET_MESSAGE_TOTAL', res.data.data.total)
      //   // }
      // })
    }
  }
}

3.在store文件下的index.js进行引入

import Vue from 'vue'
import vuex from 'vuex'
import user from './modules/user'
Vue.use(vuex)
const store = new vuex.Store({
  modules: {
    user: user,
  
  }
})

export default store

4.使用

 v-limit="['ForUnloading.CombinedOrder:Programme']"