ele-admin框架权限指令与基本布局

286 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第23天,点击查看活动详情

权限指令

src/utils/permission.js

指令方式使用,不能用在template上

某个权限的按钮 v-permission="sys:user:add"

某些权限的按钮 v-permission="['sys:user;add','sys:user:edit']"

任意一个权限才会显示 v-any-permission="['sys:user:add','sys:user-edit']"

某个角色 v-role="admin" v-role="['admin', 'normal']" v-any-role="['admin','normal']"

服务的方式使用

判断this.hasPermissionthis.hasPermission this.hasAnyPermission

this.hasRolethis.hasRole this.hasAnyRole

 

框架布局

ele-pro-layout 框架外层布局的组件

redirectPath 避免刷新时做无用的混合导航菜单分割和计算顶栏

locale 当前的语言, 改变会重新调用i18n方法

图标插槽 标题title

 

ele-pro-layout事件列表

不能直接改变传递的属性的值,应该监听下面的事件去改变传递的对应属性的值

screen-size-change

监听浏览器变化做布局的自适应

 

ele-pro-table表格查询分页排序筛选

刷新表格

this.$refs.table.reload();

实现展开行

先在columns中加一列 type: 'extend'

通过插槽设置展开后的内容,用slot字段设置插槽的名称

lazy属性

开启懒加载,点加载子级的时候也会通过数据请求,并且会传递parent参数为父级的数据

排序

把 sortable: 'custom'改为sortable: true, 然后监听sort-change事件

string数据源

配置后端的接口地址,需要vue实例中有$http

:request设定请求参数的名称,也可以通过parseParam方法设定

:response设定响应参数

parseData方法设定

:parse-data = "parseData"

parseDara(res) { return res }

 

ele-cropper-dialog 未全局安装,需要按需引入

基于cropper.js开发

上传服务器

裁剪后返回base64字符,服务端可以接受字符类型

服务端接收file类型设置 :to-blob="true"

 

ele-icon-picker 引入icon组件库

自定义样式 通过插槽作用域可获取show和value参数

value表示当前选中的图标

show表示popover的展开状态,可以使用这个实现展示和收起时不同的箭头指示