<think>我们正在使用Jeecg-
Boot框架，需要
实现表格操作
列的
动态显示和隐藏。这通常涉及到
前端代码的调整，因为操作
列是在
前端表格组件中定义的。
在Jeecg-
Boot中，表格通常是使用其封装的JEdi
tableTable或J
Table组件。我们可以通过条件判断来控制某一
列是否显示。
思路：
1
. 在表格的
列定义中，为操作
列添加一个条件，根据某个变量（可以是全局状态、局部变量、或行数据中的某个字段）来决定是否显示该
列。
2
. 这个变量可以从后端获取，也可以在
前端根据权限或用户操作
动态改变。
具体步骤（以JEdi
tableTable为例）：
- 在columns定义操作
列时，使用scopedSlots自定义
列，并在其中使用v-if来控制操作按钮的显示。
- 或者，我们可以直接控制整个操作
列的显示隐藏，这可以通过在columns数组中加入条件来
实现。
但是注意：Jeecg-
Boot的JEdi
tableTable组件中，columns是在初始化时定义的，我们需要在定义时根据某个条件来决定是否加入操作
列。
示例代码：
假设我们有一个权限变量`hasOperatePermission`，当它为true时显示操作
列，否则不显示。
在columns定义中：
const columns = [
// 其他
列...
{
title: '操作',
key: 'action',
width: '20%',
// 这里根据条件决定是否渲染该
列
ifShow: () => {
return this
.hasOperatePermission; // 根据权限变量决定
},
scopedSlots: { customRender: 'action' },
}
]
但是，Jeecg-
Boot的JEdi
tableTable组件是否支持`ifShow`属性？根据Jeecg-
Boot的文档，其表格组件是基于Ant Design
Vue的，而Ant Design
Vue的
Table Column支持使用v-if指令来控制
列的显示隐藏。
因此，我们可以在模板中这样写：
<a-
table-column
v-if="hasOperatePermission"
title="操作"
key="action"
...>
... 操作按钮
...
</a-
table-column>
然而，在Jeecg-
Boot中，我们通常使用JEdi
tableTable组件，它是在
js中定义columns的。这时，我们可以这样：
const columns = [
...,
...(this
.hasOperatePermission ? [{
title: '操作',
dataIndex: '',
key: 'action',
scopedSlots: { customRender: 'action' },
}] : [])
]
这样，当hasOperatePermission为false时，操作
列就不会被添加到columns中。
动态改变：
我们可以将hasOperatePermission放在
vue的data中，这样当它改变时，表格会重新渲染，操作
列就会显示或隐藏。
另一种情况：根据行数据
动态显示操作
列（比如某行数据的状态不允许操作）
这时，我们可以在操作
列的自定义插槽中使用v-if来控制每个操作按钮的显示，而不是整
列。
示例：
在操作
列的插槽中：
<template slot="action" slot-scope="text, record">
<a v-if="record
.status === 1" @click="handleEdit(record)">编辑</a>
<a v-if="record
.status === 1" @click="handleDelete(record)">删除</a>
<span v-else>不可操作</span>
</template>
但是，如果整
列都要根据权限隐藏，那么使用上面提到的
动态columns数组的方式更合适。
总结：
1
. 整
列隐藏：在定义columns数组时，使用条件判断是否加入操作
列。
2
. 行内按钮隐藏：在操作
列的插槽中，对每个按钮使用v-if根据行数据或状态进行控制。
问题：如何
实现动态改变？比如用户权限改变后，操作
列要实时更新？
因为columns是在created或mounted中定义的，如果权限变量是响应式的，那么当权限变量改变时，我们需要重新计算columns并重新设置表格的columns属性。
在
Vue中，我们可以将columns定义为一个计算属性，这样当依赖的权限变量改变时，columns会自动更新。
示例：
computed: {
tableColumns() {
const baseColumns = [
{ title: '姓名', dataIndex: 'name' },
//
... 其他固定
列
];
if (this
.hasOperatePermission) {
baseColumns
.push({
title: '操作',
key: 'action',
scopedSlots: { customRender: 'action' }
});
}
return baseColumns;
}
}
然后在模板中：
<j-edi
table-
table
:columns="
tableColumns"
...>
... 其他内容
...
</j-edi
table-
table>
这样，当hasOperatePermission改变时，
tableColumns会重新计算，表格就会更新。
注意：Jeecg-
Boot的JEdi
tableTable组件是否支持
动态columns？根据经验，它是支持的，因为内部使用了Ant Design
Vue的
Table，而Ant Design
Vue的
Table是支持
动态columns的。
因此，我们可以通过计算属性来
实现动态显示隐藏操作
列。
步骤总结：
1
. 在
Vue组件的data中定义hasOperatePermission（可以是来自后端的权限数据，也可以根据其他条件计算）。
2
. 在computed中定义
tableColumns，根据hasOperatePermission的值决定是否包含操作
列。
3
. 将
tableColumns绑定到JEdi
tableTable的columns属性上。
另外，如果权限变量是异步获取的，我们可以在created或mounted中请求权限接口，然后更新hasOperatePermission，计算属性会自动更新。
示例代码：
template:
<template>
<j-edi
table-
table
ref="edi
tableTable"
:columns="
tableColumns"
:dataSource="dataSource"
...>
<!-- 操作
列的自定义插槽 -->
<template v-if="hasOperatePermission" slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a @click="handleDelete(record)">删除</a>
</template>
</j-edi
table-
table>
</template>
script:
export default {
data() {
return {
hasOperatePermission: false, // 默认没有权限
dataSource: [],
// 注意：我们不需要在data中定义完整的columns，因为通过计算属性生成
};
},
computed: {
tableColumns() {
let columns = [
{ title: '姓名', dataIndex: 'name', key: 'name' },
//
... 其他
列
];
if (this
.hasOperatePermission) {
columns
.push({
title: '操作',
key: 'action',
width: '20%',
align: 'center',
scopedSlots: { customRender: 'action' } // 这里对应template中的slot
});
}
return columns;
}
},
mounted() {
// 获取权限
this
.getPermission();
},
methods: {
getPermission() {
// 模拟从后端获取权限
api
.getPermission()
.then(res => {
this
.hasOperatePermission = res
.hasOperatePermission;
});
},
// 其他方法
}
}
注意：在操作
列中，我们使用了scopedSlots，所以在模板中需要提供对应的插槽。并且，我们通过v-if="hasOperatePermission"来确保在没有权限时，插槽内容不会被渲染（虽然
列已经没有了，但为了保险，也可以加上）。
但是，当操作
列被移除时，插槽也不会被渲染，所以模板中的v-if可以省略。不过，如果还有其他地方用到这个插槽，那么保留条件判断也可以。
这样，当权限获取到并更新hasOperatePermission时，计算属性
tableColumns会重新计算，表格将重新渲染，操作
列就会显示或隐藏。
另外，Jeecg-
Boot还提供了另一种方式：通过权限指令来控制按钮的显示隐藏，比如v-auth。但这种方式通常用于控制按钮，而不是整
列。如果只是控制
列，用上述方法更直接。
如果项目中有多个表格需要这样处理，我们可以将权限判断封装成一个公共函数，或者使用mixin。
以上就是在Jeecg-
Boot中
实现表格操作
列动态显示隐藏的方法。</think>在 Jeecg-
Boot 框架中
实现表格操作
列的
动态显示隐藏，可以通过以下步骤
实现，主要涉及
前端 Vue 组件的权限控制和
列配置：
###
实现方案
1
. **权限标识定义**
在路由或按钮权限配置中定义操作
列权限标识（如 `btn:edit`）：
```javascript
// permission
.js
export const permissions = [
{ id: 'btn:edit', name: '编辑权限' },
{ id: 'btn:delete', name: '删除权限' }
]
```
2
. **表格
列动态渲染**
在
Vue 组件中使用 `v-if` 结合权限判断：
```
vue
<template>
<a-
table :columns="dynamicColumns">
<!-- 操作
列插槽 -->
<template slot="action" slot-scope="text, record">
<a-button v-if="hasPermission('btn:edit')" @click="handleEdit(record)">编辑</a-button>
<a-button v-if="hasPermission('btn:delete')" @click="handleDelete(record)">删除</a-button>
</template>
</a-
table>
</template>
<script>
import { hasPermission } from '@/utils/permission'
export default {
data() {
return {
// 基础
列配置
baseColumns: [
{ title: '姓名', dataIndex: 'name' },
{ title: '年龄', dataIndex: 'age' }
],
//
动态操作
列
actionColumn: {
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
}
},
computed: {
//
动态合并
列
dynamicColumns() {
const columns = [
...this
.baseColumns]
if (hasPermission('btn:edit') || hasPermission('btn:delete')) {
columns
.push(this
.actionColumn)
}
return columns
}
}
}
</script>
```
3
. **后端权限控制（可选）**
在接口层验证操作权限：
```java
// Controller层
@AutoLog("删除操作")
@DeleteMapping("/delete")
@RequiresPermissions("btn:delete") // Shiro权限注解
public Result<?> delete(@RequestParam String id) {
// 删除逻辑
}
```
### 关键点说明
1
. **权限判断函数**
```javascript
// utils/permission
.js
export function hasPermission(permission) {
const userPermissions = store
.getters
.permissions // 从
Vuex获取权限
列表
return userPermissions
.includes(permission)
}
```
2
. **
列渲染逻辑**
- 使用 `computed` 属性
动态生成
列配置
- 通过 `v-if` 控制单个操作按钮的显示
- 操作
列整体隐藏条件：当所有操作按钮均无权限时
3
. **权限数据来源**
- 用户登录时获取权限
列表存入
Vuex
```javascript
// 登录成功后存储权限
store
.commit('SET_PERMISSIONS', ['btn:edit', 'btn:view'])
```
### 效果说明
- **有编辑权限**：显示编辑按钮
- **有删除权限**：显示删除按钮
- **两者皆无**：整个操作
列自动隐藏
- **后端保护**：即使
前端隐藏，接口层仍验证权限
### 扩展优化
1
. **行级权限控制**：根据行数据
动态显示
```
vue
<a-button
v-if="hasPermission('btn:edit') && record
.status !== 3"
@click="handleEdit(record)">
编辑
</a-button>
```
2
. **Jeecg原生支持**：使用 `dictCode` 配置
```javascript
{ title: '操作', dataIndex: 'action', dictCode: 'PERMISSION_CODE' }
```
3
. **全局配置**：在 `src/settings
.js` 定义通用权限标识
```javascript
export const PERMISSION_CODES = {
EDIT: 'btn:edit',
DELETE: 'btn:delete'
}
```
> **最佳实践**：建议同时
实现前端展示控制和后端接口验证，确保系统安全性[^1]。Jeecg-
Boot 的权限体系基于 Shiro 和
Vue 指令 `v-auth`，但
动态列场景需手动
实现计算属性逻辑[^2]。
---
最低0.47元/天 解锁文章
扫一扫
566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
