Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
7e2b207a
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
4
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
7e2b207a
编写于
5月 12, 2024
作者:
H
hxr
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:
✨
表格新增列设置控制
上级
8258fec0
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
151 addition
and
73 deletion
+151
-73
src/components/PageContent/index.vue
src/components/PageContent/index.vue
+151
-73
未找到文件。
src/components/PageContent/index.vue
浏览文件 @
7e2b207a
<
template
>
<el-card
shadow=
"never"
class=
"table-container"
>
<template
#header
>
<!-- 表格左上方工具栏 -->
<template
v-for=
"item in contentConfig.toolbar"
:key=
"item"
>
<template
v-if=
"typeof item === 'string'"
>
<!-- 刷新 -->
<template
v-if=
"item === 'refresh'"
>
<el-button
type=
"info"
icon=
"refresh"
@
click=
"handleToolbar(item)"
/>
</
template
>
<!-- 新增 -->
<
template
v-else-if=
"item === 'add'"
>
<el-button
v-hasPerm=
"[`$
{contentConfig.pageName}:${item}`]"
type="success"
icon="plus"
@click="handleToolbar(item)"
>
新增
</el-button>
</
template
>
<!-- 删除 -->
<
template
v-else-if=
"item === 'delete'"
>
<el-button
v-hasPerm=
"[`$
{contentConfig.pageName}:${item}`]"
type="danger"
icon="delete"
:disabled="removeIds.length === 0"
@click="handleToolbar(item)"
>
删除
</el-button>
<div
class=
"flex-x-between mb-[10px]"
>
<div>
<!-- 表格左上方工具栏 -->
<template
v-for=
"item in contentConfig.toolbar"
:key=
"item"
>
<template
v-if=
"typeof item === 'string'"
>
<!-- 新增 -->
<template
v-if=
"item === 'add'"
>
<el-button
v-hasPerm=
"[`$
{contentConfig.pageName}:${item}`]"
type="success"
icon="plus"
@click="handleToolbar(item)"
>
新增
</el-button>
</
template
>
<!-- 删除 -->
<
template
v-else-if=
"item === 'delete'"
>
<el-button
v-hasPerm=
"[`$
{contentConfig.pageName}:${item}`]"
type="danger"
icon="delete"
:disabled="removeIds.length === 0"
@click="handleToolbar(item)"
>
删除
</el-button>
</
template
>
<!-- 导出 -->
<
template
v-else-if=
"item === 'export'"
>
<el-button
v-hasPerm=
"[`$
{contentConfig.pageName}:${item}`]"
type="primary"
icon="download"
@click="handleToolbar(item)"
>
导出
</el-button>
</
template
>
</template>
<!-- 导出 -->
<
template
v-else-if=
"item === 'export'"
>
<el-button
v-hasPerm=
"[`$
{contentConfig.pageName}:${item}`]"
type="primary"
icon="download"
@click="handleToolbar(item)"
>
导出
</el-button>
<!-- 其他 -->
<
template
v-else-if=
"typeof item === 'object'"
>
<template
v-if=
"item.auth"
>
<el-button
v-hasPerm=
"[`$
{contentConfig.pageName}:${item.auth}`]"
:icon="item.icon"
type="default"
@click="handleToolbar(item.name)"
>
{{
item
.
text
}}
</el-button>
</
template
>
<
template
v-else
>
<el-button
:icon=
"item.icon"
type=
"default"
@
click=
"handleToolbar(item.name)"
>
{{
item
.
text
}}
</el-button>
</
template
>
</template>
</template>
<!-- 其他 -->
<
template
v-else-if=
"typeof item === 'object'"
>
<template
v-if=
"item.auth"
>
<el-button
v-hasPerm=
"[`$
{contentConfig.pageName}:${item.auth}`]"
:icon="item.icon"
type="default"
@click="handleToolbar(item.name)"
>
{{
item
.
text
}}
</el-button>
</
template
>
<
template
v-else
>
<el-button
:icon=
"item.icon"
type=
"default"
@
click=
"handleToolbar(item.name)"
>
{{
item
.
text
}}
</el-button>
</div>
<!-- 表格右上方工具栏 -->
<div>
<el-icon
class=
"cursor-pointer"
@
click=
"handleToolbar('refresh')"
>
<i-ep-refresh
/>
</el-icon>
<!-- 列设置 -->
<el-popover
placement=
"bottom"
trigger=
"click"
>
<
template
#reference
>
<el-icon
class=
"cursor-pointer ml-2"
>
<i-ep-setting
/>
</el-icon>
</
template
>
</template>
</template>
</template>
<el-checkbox
v-model=
"columnSetting.checkAll"
:indeterminate=
"columnSetting.isIndeterminate"
@
change=
"handleCheckAllChange"
>
全选
</el-checkbox>
<el-checkbox-group
v-model=
"columnSetting.checkedCols"
@
change=
"handleCheckedColumnsChange"
>
<div
v-for=
"col in contentConfig.cols"
:key=
"col.label"
>
<el-checkbox
v-if=
"col.label"
:value=
"col.label"
:label=
"col.label"
/>
</div>
</el-checkbox-group>
</el-popover>
</div>
</div>
<!-- 列表 -->
<el-table
v-loading=
"loading"
...
...
@@ -78,9 +109,9 @@
:data=
"pageData"
@
selection-change=
"handleSelectionChange"
>
<
template
v-for=
"col in
contentConfig.col
s"
:key=
"col.prop"
>
<
template
v-for=
"col in
displayedColumn
s"
:key=
"col.prop"
>
<!-- 显示图片 -->
<template
v-if=
"col.templet === 'image'"
>
<template
v-if=
"col.
show && col.
templet === 'image'"
>
<el-table-column
v-bind=
"col"
>
<template
#default
="
scope
"
>
<template
v-if=
"Array.isArray(scope.row[col.prop])"
>
...
...
@@ -109,7 +140,7 @@
</el-table-column>
</template>
<!-- 列操作栏 -->
<
template
v-else-if=
"col.templet === 'tool'"
>
<
template
v-else-if=
"col.
show && col.
templet === 'tool'"
>
<el-table-column
v-bind=
"col"
>
<template
#default
="
scope
"
>
<template
v-for=
"item in col.operat"
:key=
"item"
>
...
...
@@ -180,7 +211,7 @@
</el-table-column>
</template>
<!-- 自定义 -->
<
template
v-else-if=
"col.templet === 'custom'"
>
<
template
v-else-if=
"col.
show && col.
templet === 'custom'"
>
<el-table-column
v-bind=
"col"
>
<template
#default
="
scope
"
>
<slot
...
...
@@ -193,7 +224,7 @@
</template>
<!-- 其他 -->
<
template
v-else
>
<el-table-column
v-bind=
"col"
/>
<el-table-column
v-bind=
"col"
v-if=
"col.show"
/>
</
template
>
</template>
</el-table>
...
...
@@ -211,7 +242,7 @@
<
script
setup
lang=
"ts"
>
import
{
ref
,
reactive
}
from
"
vue
"
;
import
Pagination
from
"
@/components/Pagination/index.vue
"
;
import
type
{
TableProps
}
from
"
element-plus
"
;
import
type
{
TableProps
,
CheckboxValueType
}
from
"
element-plus
"
;
// 对象类型
export
type
IObject
=
Record
<
string
,
any
>
;
...
...
@@ -398,6 +429,53 @@ function exportPageData(queryParams: IObject = {}) {
ElMessage
.
error
(
"
未配置exportAction
"
);
}
}
// 列设置类型声明
interface
IColumnSetting
{
checkAll
:
boolean
;
isIndeterminate
:
boolean
;
checkedCols
:
string
[];
}
// 列设置
const
columnSetting
=
ref
<
IColumnSetting
>
({
checkAll
:
true
,
isIndeterminate
:
false
,
checkedCols
:
[],
});
// 创建一个响应式副本,用于存储最后显示的列配置
const
displayedColumns
=
ref
<
IObject
>
(
props
.
contentConfig
.
cols
);
// 全选/取消全选
const
handleCheckAllChange
=
(
checkAll
:
CheckboxValueType
)
=>
{
columnSetting
.
value
.
checkedCols
=
checkAll
?
props
.
contentConfig
.
cols
.
map
((
col
)
=>
col
.
label
)
:
[];
columnSetting
.
value
.
isIndeterminate
=
false
;
displayedColumns
.
value
=
displayedColumns
.
value
.
map
((
col
:
IObject
)
=>
({
...
col
,
show
:
checkAll
,
}));
};
// 选中列变化
const
handleCheckedColumnsChange
=
(
values
:
CheckboxValueType
[])
=>
{
const
showColumnsLength
=
props
.
contentConfig
.
cols
.
length
;
const
checkedCount
=
values
.
length
;
columnSetting
.
value
.
checkAll
=
checkedCount
===
showColumnsLength
;
columnSetting
.
value
.
isIndeterminate
=
checkedCount
>
0
&&
checkedCount
<
showColumnsLength
;
displayedColumns
.
value
=
displayedColumns
.
value
.
map
((
col
:
IObject
)
=>
({
...
col
,
show
:
values
.
includes
(
col
.
label
),
}));
};
// 初始化全选状态
handleCheckAllChange
(
columnSetting
.
value
.
checkAll
);
</
script
>
<
style
lang=
"scss"
scoped
></
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录