Layui table如何设置不同权限下显示不同的列

云静大大_5786

云静大大_5786

2026-07-02

636人浏览

原创

layui表格权限控制需分层处理:toolbar按钮须在table.render()前按角色过滤生成;操作列按钮依赖行级权限字段;列显隐由视图级结构决定,三者不可混用。

toolbar 必须在 table.render() 前完成权限过滤

layui 的 toolbar 参数不支持运行时条件渲染,只接受 html 字符串、模板 id 或 true。所谓“按角色显示按钮”,本质是在调用 table.render() 之前,就根据 window.user_role(或 localstorage、api 返回值)筛出当前用户能点的按钮,拼成字符串传进去。

常见错误是全量渲染后用 $('.layui-btn[lay-event="export"]').hide() —— 按钮 DOM 还在,右键审查就能 show 出来,甚至直接触发绑定函数,后端鉴权变成最后一道防线。

  • 按钮配置必须结构化:定义为带 role 字段的数组,例如 [{id: 'export', text: '导出', role: ['admin', 'editor']}, {id: 'sync', text: '同步', role: ['admin']}]
  • 拼接时用 .filter().map().join(''),避免 XSS 和空值报错;lay-event 值必须全局唯一
  • title 提示不能靠 CSS attr() 补,得在 done 回调里通过 data-title 预埋并统一补全
  • 权限变更时不能 patch DOM,必须销毁表格后重新 table.render()

操作列按钮要依赖行级权限字段,而非全局角色

如果某行本应禁止操作(比如非本人创建),仅靠 window.USER_ROLE 或 localStorage.getItem('role') 在 templet 里判断,会漏掉行级控制。后端必须在每条记录中透出必要权限标识,例如 can_edit、can_delete、is_creator。

前端不要在 templet 里重复写 d.create_by === window.USER_ID 这类逻辑——既易错又难维护。若必须前端计算,请抽成统一工具函数,如 canDo(d, 'delete')。

  • fixed 列 + 动态按钮 = 必须显式设 width,否则宽度计算异常导致错位或换行
  • 按钮数量不固定时(1 个 vs 3 个),Layui 不会自动重算列宽,width 值建议留余量(如 150)
  • templet 中避免内联 JS,用 data-* 属性传递原始值,便于后续扩展(如右键菜单)

动态切换列显示要用 cols 重载,别硬写索引

想隐藏“操作”列?别写 cols[0][3].hide = true。加删列、多级表头、响应式折叠都会让索引偏移。正确做法是遍历 tableIns.config.cols,按 field 或自定义 data-field 定位目标列。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

初始化时给关键列加标识:{field: 'op', title: '操作', data-field: 'operation'},之后切换更可靠。

  • 修改前必须深拷贝:JSON.parse(JSON.stringify(tableIns.config.cols)),否则引用共享导致状态污染
  • fixed 列的 hide 属性仍生效,但固定区域宽度不会自动收缩,需手动调用 table.resize()
  • reload() 不继承 where、page.curr、initSort,必须显式传入,否则翻页跳回第 1 页、排序箭头消失
  • 如果用了 autoSort: true,initSort 必须完整传入,格式如 {field: 'name', type: 'asc'}

不同视图的列结构差异大时,后端必须按视图返回对应字段

用户视图返回 name、age、city,订单视图返回 order_no、amount、status —— 这些字段名必须与前端 cols 中的 field 一一对应。前端不能靠 JS 拼数据,否则分页、搜索、排序参数全乱。

列定义应拆成多个变量(如 userCols、orderCols),由下拉框或路由参数决定用哪一组,再传给 table.reload({ cols: [xxx] })。

  • 切换列时强制回到第 1 页是合理行为,加 page: { curr: 1 } 显式声明,避免当前页无数据
  • 如果列中有 templet,不同视图间不能“复用”同一列定义 —— A 视图有 templet,B 视图没有,就得各自完整声明
  • 列名翻译(如中英文切换)也走同一套机制:后端返回 field + title,前端只做映射,不硬编码中文

列配置和权限校验的边界容易模糊:toolbar 是页面级静态控制,操作列按钮是行级动态控制,而列显隐是视图级结构控制——三者触发时机、数据来源、更新方式完全不同,混用会导致 reload 失效或权限绕过。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2643

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5763

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6730

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6438

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

923

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

3040

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2853

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.3万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习