Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
开源元宇宙
vue-vben-admin
提交
9e208411
V
vue-vben-admin
项目概览
开源元宇宙
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
0
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9e208411
编写于
4月 27, 2021
作者:
Z
zuihou
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(demo): add permission table demo
上级
5a3861b9
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
141 addition
and
0 deletion
+141
-0
src/locales/lang/en/routes/demo/table.ts
src/locales/lang/en/routes/demo/table.ts
+1
-0
src/locales/lang/zh_CN/routes/demo/table.ts
src/locales/lang/zh_CN/routes/demo/table.ts
+1
-0
src/router/menus/modules/demo/comp.ts
src/router/menus/modules/demo/comp.ts
+4
-0
src/router/routes/modules/demo/comp.ts
src/router/routes/modules/demo/comp.ts
+8
-0
src/views/demo/table/AuthColumn.vue
src/views/demo/table/AuthColumn.vue
+127
-0
未找到文件。
src/locales/lang/en/routes/demo/table.ts
浏览文件 @
9e208411
...
...
@@ -16,4 +16,5 @@ export default {
footerTable
:
'
Footer
'
,
editCellTable
:
'
Editable cell
'
,
editRowTable
:
'
Editable row
'
,
authColumn
:
'
Auth column
'
,
};
src/locales/lang/zh_CN/routes/demo/table.ts
浏览文件 @
9e208411
...
...
@@ -16,4 +16,5 @@ export default {
footerTable
:
'
表尾行合计
'
,
editCellTable
:
'
可编辑单元格
'
,
editRowTable
:
'
可编辑行
'
,
authColumn
:
'
权限列
'
,
};
src/router/menus/modules/demo/comp.ts
浏览文件 @
9e208411
...
...
@@ -118,6 +118,10 @@ const menu: MenuModule = {
path
:
'
editRowTable
'
,
name
:
t
(
'
routes.demo.table.editRowTable
'
),
},
{
path
:
'
authColumn
'
,
name
:
t
(
'
routes.demo.table.authColumn
'
),
},
],
},
{
...
...
src/router/routes/modules/demo/comp.ts
浏览文件 @
9e208411
...
...
@@ -230,6 +230,14 @@ const comp: AppRouteModule = {
title
:
t
(
'
routes.demo.table.editRowTable
'
),
},
},
{
path
:
'
authColumn
'
,
name
:
'
AuthColumnDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/AuthColumn.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.authColumn
'
),
},
},
],
},
{
...
...
src/views/demo/table/AuthColumn.vue
0 → 100644
浏览文件 @
9e208411
<
template
>
<div
class=
"p-4"
>
<BasicTable
@
register=
"registerTable"
>
<template
#action
="
{ record }">
<TableAction
:actions=
"[
{
label: '编辑',
onClick: handleEdit.bind(null, record),
auth: 'other', // 根据权限控制是否显示: 无权限,不显示
},
{
label: '删除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
auth: 'super', // 根据权限控制是否显示: 有权限,会显示
},
]"
:dropDownActions="[
{
label: '启用',
popConfirm: {
title: '是否启用?',
confirm: handleOpen.bind(null, record),
},
ifShow: (_action) => {
return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
},
},
{
label: '禁用',
popConfirm: {
title: '是否禁用?',
confirm: handleOpen.bind(null, record),
},
ifShow: () => {
return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
},
},
{
label: '同时控制',
popConfirm: {
title: '是否动态显示?',
confirm: handleOpen.bind(null, record),
},
auth: 'super', // 同时根据权限和业务控制是否显示
ifShow: () => {
return true;
},
},
]"
/>
</
template
>
</BasicTable>
</div>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
BasicTable
,
useTable
,
BasicColumn
,
TableAction
}
from
'
/@/components/Table
'
;
import
{
demoListApi
}
from
'
/@/api/demo/table
'
;
const
columns
:
BasicColumn
[]
=
[
{
title
:
'
编号
'
,
dataIndex
:
'
no
'
,
width
:
100
,
},
{
title
:
'
姓名
'
,
dataIndex
:
'
name
'
,
auth
:
'
test
'
,
// 根据权限控制是否显示: 无权限,不显示
},
{
title
:
'
状态
'
,
dataIndex
:
'
status
'
,
},
{
title
:
'
地址
'
,
dataIndex
:
'
address
'
,
auth
:
'
super
'
,
// 同时根据权限和业务控制是否显示
ifShow
:
(
_column
)
=>
{
return
true
;
},
},
{
title
:
'
开始时间
'
,
dataIndex
:
'
beginTime
'
,
},
{
title
:
'
结束时间
'
,
dataIndex
:
'
endTime
'
,
width
:
200
,
},
];
export
default
defineComponent
({
components
:
{
BasicTable
,
TableAction
},
setup
()
{
const
[
registerTable
]
=
useTable
({
title
:
'
TableAction组件及固定列示例
'
,
api
:
demoListApi
,
columns
:
columns
,
bordered
:
true
,
actionColumn
:
{
width
:
250
,
title
:
'
Action
'
,
dataIndex
:
'
action
'
,
slots
:
{
customRender
:
'
action
'
},
},
});
function
handleEdit
(
record
:
Recordable
)
{
console
.
log
(
'
点击了编辑
'
,
record
);
}
function
handleDelete
(
record
:
Recordable
)
{
console
.
log
(
'
点击了删除
'
,
record
);
}
function
handleOpen
(
record
:
Recordable
)
{
console
.
log
(
'
点击了启用
'
,
record
);
}
return
{
registerTable
,
handleEdit
,
handleDelete
,
handleOpen
,
};
},
});
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录