element中横竖导航中，加入按钮级控制

首先，原理

let btnPermissions = [];
for(var a = 0 ;a<res.data.map.buttonList.length ; a++){
 	btnPermissions.push(res.data.map.buttonList[a].resCode);
 }
 sessionStorage.setItem('btnPermissions', JSON.stringify(btnPermissions));

登录成功后，buttonList中，后台返回过来的按钮的集合，我取到里面的标识符，存入数组。
结果如下，

let btnPermissions = ['domain:query','domain:add','domain:edit','domain:cache','domain:del','domain:define','domain:transition']

新建个js，directive.js

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
 inserted: function (el, binding, vnode) {

		// 获取按钮权限
		let btnPermissions = el.getAttribute("value");
		if (!Vue.prototype.$_has(btnPermissions)) {
			//这个时候就是没有权限，需要删除掉按钮
			el.parentNode.removeChild(el);
		}

 }
});


// 权限检查方法
Vue.prototype.$_has = function (value) {
	
	 let isExist = false;
	 let btnPermissionsStr = JSON.parse(sessionStorage.getItem("btnPermissions"));

	 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
	  return false;
	 }
	 if (btnPermissionsStr.indexOf(value) > -1) {
	  isExist = true;
	 }
	 return isExist;
};
export {has}

在main.js中引入js

import has from '@/api/directive.js';

在页面中，按钮上加入

<el-form-item>
	<el-button type="primary" icon="el-icon-search" v-on:click="getRows" value='domain:query' v-has>查询</el-button>
</el-form-item>

其中最重要的就是加入了value=‘domain:query’ v-has，v-has是定义的钩子，会在inserted的时机，去调用directive.js中的方法，去判断自己是否显示，value='domain:query’是其中的判断条件，必须唯一，所以我这里强制约定为routes定义的component属性，的一个字母小写

使用

以‘域定义管理’为列，因为component = Domain，所以对应的按钮
查询:value=‘domain:query’
新增:value=‘domain:add’
修改:value=‘domain:edit’
删除:value=‘domain:del’

在资源配置中

注意一定要是类型按钮，然后再角色中资源关联去给按钮权限赋值

注意，不能和v-if共同使用，可以和v-show共同使用