Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
mall-admin
提交
bfcf8e69
M
mall-admin
项目概览
有来技术
/
mall-admin
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
M
mall-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
bfcf8e69
编写于
6月 13, 2023
作者:
A
April
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 表格冻结
上级
27e3dff6
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
183 addition
and
0 deletion
+183
-0
src/views/demo/table.vue
src/views/demo/table.vue
+183
-0
未找到文件。
src/views/demo/table.vue
0 → 100644
浏览文件 @
bfcf8e69
<
template
>
<div
class=
"table-page"
>
<div
class=
"table-wrap"
>
<el-table
:data=
"tableData"
border
>
<el-table-column
v-for=
"oneCol in tableColList"
:key=
"oneCol.prop"
:prop=
"oneCol.prop"
:label=
"oneCol.label"
min-width=
"200"
:fixed=
"oneCol.fixed"
>
<template
#header
>
<div
class=
"table-head"
>
<div>
{{
oneCol
.
label
}}
</div>
<el-dropdown
trigger=
"click"
@
command=
"(command: string) => handleCommand(command, oneCol)"
>
<i-ep-arrow-down
class=
"action-more"
></i-ep-arrow-down>
<template
#dropdown
>
<el-dropdown-menu>
<!--
<el-dropdown-item>
升序
</el-dropdown-item>
<el-dropdown-item>
降序
</el-dropdown-item>
-->
<el-dropdown-item
:command=
"TableCommand.FIXED"
>
冻结
</el-dropdown-item>
</el-dropdown-menu>
</
template
>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<
script
lang=
"ts"
setup
>
import
{
TableColumn
}
from
"
element-plus/es/components/table/src/table-column/defaults
"
;
enum
TableCommand
{
// 冻结
FIXED
=
"
fixed
"
,
// 升序
ASC
=
"
asc
"
,
// 降序
DESC
=
"
desc
"
,
}
const
tableData
=
[
{
date
:
"
2016-05-03
"
,
name
:
"
admin
"
,
address
:
"
广东
"
,
id
:
1
,
gender
:
"
男
"
,
height
:
176
,
school
:
"
清华大学
"
,
hobby
:
"
游泳
"
,
},
{
date
:
"
2016-05-02
"
,
name
:
"
admin
"
,
address
:
"
江西
"
,
id
:
2
,
gender
:
"
男
"
,
height
:
167
,
school
:
"
清华大学
"
,
hobby
:
"
游泳
"
,
},
{
date
:
"
2016-05-04
"
,
name
:
"
admin
"
,
address
:
"
湖南
"
,
id
:
3
,
gender
:
"
男
"
,
height
:
173
,
school
:
"
清华大学
"
,
hobby
:
"
游泳
"
,
},
{
date
:
"
2016-05-01
"
,
name
:
"
admin
"
,
address
:
"
重庆
"
,
id
:
4
,
gender
:
"
女
"
,
height
:
178
,
school
:
"
清华大学
"
,
hobby
:
"
游泳
"
,
},
];
interface
ColumnProp
{
label
:
string
;
prop
:
string
;
order
:
null
|
boolean
;
fixed
:
null
|
string
;
}
const
tableColList
=
ref
<
ColumnProp
[]
>
([
{
label
:
"
ID
"
,
prop
:
"
id
"
,
order
:
null
,
fixed
:
null
,
},
{
label
:
"
姓名
"
,
prop
:
"
name
"
,
order
:
null
,
fixed
:
null
,
},
{
label
:
"
性别
"
,
prop
:
"
gender
"
,
order
:
null
,
fixed
:
null
,
},
{
label
:
"
日期
"
,
prop
:
"
date
"
,
order
:
null
,
fixed
:
null
,
},
{
label
:
"
地址
"
,
prop
:
"
address
"
,
order
:
null
,
fixed
:
null
,
},
{
label
:
"
身高
"
,
prop
:
"
height
"
,
order
:
null
,
fixed
:
null
,
},
{
label
:
"
学校
"
,
prop
:
"
school
"
,
order
:
null
,
fixed
:
null
,
},
{
label
:
"
爱好
"
,
prop
:
"
hobby
"
,
order
:
null
,
fixed
:
null
,
},
]);
const
handleCommand
=
(
command
:
string
,
tableCol
:
ColumnProp
)
=>
{
if
(
command
===
TableCommand
.
FIXED
)
{
tableColList
.
value
.
forEach
((
item
)
=>
{
if
(
item
.
prop
===
tableCol
.
prop
)
{
item
.
fixed
=
"
left
"
;
}
});
}
};
</
script
>
<
style
lang=
"scss"
scoped
>
.table-page
{
width
:
100%
;
height
:
calc
(
100vh
-
84px
);
padding
:
10px
;
.table-wrap
{
background-color
:
#fff
;
height
:
100%
;
padding
:
20px
;
.el-table
{
width
:
800px
;
.table-head
{
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
.action-more
{
cursor
:
pointer
;
&
:hover
{
color
:
#409eff
;
}
}
}
}
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录