Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
一臭打代码的 aka 潘先生です
vue-vben-admin
提交
b97d5883
V
vue-vben-admin
项目概览
一臭打代码的 aka 潘先生です
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
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,体验更适合开发者的 AI 搜索 >>
未验证
提交
b97d5883
编写于
4月 30, 2023
作者:
G
GauharChan
提交者:
GitHub
4月 30, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: 完善ColumnSetting的操作逻辑 (#2745)
上级
6e716c56
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
75 addition
and
36 deletion
+75
-36
src/components/Table/src/BasicTable.vue
src/components/Table/src/BasicTable.vue
+2
-0
src/components/Table/src/components/settings/ColumnSetting.vue
...omponents/Table/src/components/settings/ColumnSetting.vue
+67
-36
src/components/Table/src/hooks/useColumns.ts
src/components/Table/src/hooks/useColumns.ts
+5
-0
src/components/Table/src/types/table.ts
src/components/Table/src/types/table.ts
+1
-0
未找到文件。
src/components/Table/src/BasicTable.vue
浏览文件 @
b97d5883
...
...
@@ -184,6 +184,7 @@
getViewColumns
,
getColumns
,
setCacheColumnsByField
,
setCacheColumns
,
setColumns
,
getColumnsRef
,
getCacheColumns
,
...
...
@@ -323,6 +324,7 @@
getSize
:
()
=>
{
return
unref
(
getBindValues
).
size
as
SizeType
;
},
setCacheColumns
,
};
createTableContext
({
...
tableAction
,
wrapRef
,
getBindValues
});
...
...
src/components/Table/src/components/settings/ColumnSetting.vue
浏览文件 @
b97d5883
...
...
@@ -99,7 +99,7 @@
</Tooltip>
</template>
<
script
lang=
"ts"
>
import
type
{
BasicColumn
,
ColumnChangeParam
}
from
'
../../types/table
'
;
import
type
{
BasicColumn
,
BasicTableProps
,
ColumnChangeParam
}
from
'
../../types/table
'
;
import
{
defineComponent
,
ref
,
...
...
@@ -159,6 +159,10 @@
const
defaultRowSelection
=
omit
(
table
.
getRowSelection
(),
'
selectedRowKeys
'
);
let
inited
=
false
;
// 是否当前的setColums触发的
let
isSetColumnsFromThis
=
false
;
// 是否当前组件触发的setProps
let
isSetPropsFromThis
=
false
;
const
cachePlainOptions
=
ref
<
Options
[]
>
([]);
const
plainOptions
=
ref
<
Options
[]
|
any
>
([]);
...
...
@@ -172,7 +176,8 @@
checkedList
:
[],
defaultCheckList
:
[],
});
/** 缓存初始化props */
let
cacheTableProps
:
Partial
<
BasicTableProps
<
any
>>
=
{};
const
checkIndex
=
ref
(
false
);
const
checkSelect
=
ref
(
false
);
...
...
@@ -185,7 +190,9 @@
watchEffect
(()
=>
{
const
columns
=
table
.
getColumns
();
setTimeout
(()
=>
{
if
(
columns
.
length
&&
!
state
.
isInit
)
{
if
(
isSetColumnsFromThis
)
{
isSetColumnsFromThis
=
false
;
}
else
if
(
columns
.
length
)
{
init
();
}
},
0
);
...
...
@@ -193,6 +200,11 @@
watchEffect
(()
=>
{
const
values
=
unref
(
getValues
);
if
(
isSetPropsFromThis
)
{
isSetPropsFromThis
=
false
;
}
else
{
cacheTableProps
=
cloneDeep
(
values
);
}
checkIndex
.
value
=
!!
values
.
showIndexColumn
;
checkSelect
.
value
=
!!
values
.
rowSelection
;
});
...
...
@@ -209,8 +221,17 @@
return
ret
;
}
function
init
()
{
const
columns
=
getColumns
();
async
function
init
(
isReset
=
false
)
{
// Sortablejs存在bug,不知道在哪个步骤中会向el append了一个childNode,因此这里先清空childNode
// 有可能复现上述问题的操作:拖拽一个元素,快速的上下移动,最后放到最后的位置中松手
plainOptions
.
value
=
[];
const
columnListEl
=
unref
(
columnListRef
);
if
(
columnListEl
&&
(
columnListEl
as
any
).
$el
)
{
const
el
=
(
columnListEl
as
any
).
$el
as
Element
;
Array
.
from
(
el
.
children
).
forEach
((
item
)
=>
el
.
removeChild
(
item
));
}
await
nextTick
();
const
columns
=
isReset
?
cloneDeep
(
cachePlainOptions
.
value
)
:
getColumns
();
const
checkList
=
table
.
getColumns
({
ignoreAction
:
true
,
ignoreIndex
:
true
})
...
...
@@ -221,31 +242,25 @@
return
item
.
dataIndex
||
item
.
title
;
})
.
filter
(
Boolean
)
as
string
[];
if
(
!
plainOptions
.
value
.
length
)
{
plainOptions
.
value
=
columns
;
plainSortOptions
.
value
=
columns
;
cachePlainOptions
.
value
=
columns
;
state
.
defaultCheckList
=
checkList
;
}
else
{
// const fixedColumns = columns.filter((item) =>
// Reflect.has(item, 'fixed')
// ) as BasicColumn[];
unref
(
plainOptions
).
forEach
((
item
:
BasicColumn
)
=>
{
const
findItem
=
columns
.
find
((
col
:
BasicColumn
)
=>
col
.
dataIndex
===
item
.
dataIndex
);
if
(
findItem
)
{
item
.
fixed
=
findItem
.
fixed
;
}
});
}
state
.
isInit
=
true
;
plainOptions
.
value
=
columns
;
plainSortOptions
.
value
=
columns
;
// 更新缓存配置
table
.
setCacheColumns
?.(
columns
);
!
isReset
&&
(
cachePlainOptions
.
value
=
cloneDeep
(
columns
));
state
.
defaultCheckList
=
checkList
;
state
.
checkedList
=
checkList
;
// 是否列展示全选
state
.
checkAll
=
checkList
.
length
===
columns
.
length
;
inited
=
false
;
handleVisibleChange
();
}
// checkAll change
function
onCheckAllChange
(
e
:
CheckboxChangeEvent
)
{
const
checkList
=
plainOptions
.
value
.
map
((
item
)
=>
item
.
value
);
const
checkList
=
plainSortOptions
.
value
.
map
((
item
)
=>
item
.
value
);
plainSortOptions
.
value
.
forEach
(
(
item
)
=>
((
item
as
BasicColumn
).
defaultHidden
=
!
e
.
target
.
checked
),
);
if
(
e
.
target
.
checked
)
{
state
.
checkedList
=
checkList
;
setColumns
(
checkList
);
...
...
@@ -270,6 +285,9 @@
checkedList
.
sort
((
prev
,
next
)
=>
{
return
sortList
.
indexOf
(
prev
)
-
sortList
.
indexOf
(
next
);
});
unref
(
plainSortOptions
).
forEach
((
item
)
=>
{
(
item
as
BasicColumn
).
defaultHidden
=
!
checkedList
.
includes
(
item
.
value
);
});
setColumns
(
checkedList
);
}
...
...
@@ -277,11 +295,14 @@
let
sortableOrder
:
string
[]
=
[];
// reset columns
function
reset
()
{
state
.
checkedList
=
[...
state
.
defaultCheckList
];
state
.
checkAll
=
true
;
plainOptions
.
value
=
unref
(
cachePlainOptions
);
plainSortOptions
.
value
=
unref
(
cachePlainOptions
);
setColumns
(
table
.
getCacheColumns
());
setColumns
(
cachePlainOptions
.
value
);
init
(
true
);
checkIndex
.
value
=
!!
cacheTableProps
.
showIndexColumn
;
checkSelect
.
value
=
!!
cacheTableProps
.
rowSelection
;
table
.
setProps
({
showIndexColumn
:
checkIndex
.
value
,
rowSelection
:
checkSelect
.
value
?
defaultRowSelection
:
undefined
,
});
sortable
.
sort
(
sortableOrder
);
}
...
...
@@ -316,12 +337,7 @@
}
plainSortOptions
.
value
=
columns
;
setColumns
(
columns
.
map
((
col
:
Options
)
=>
col
.
value
)
.
filter
((
value
:
string
)
=>
state
.
checkedList
.
includes
(
value
)),
);
setColumns
(
columns
.
filter
((
item
)
=>
state
.
checkedList
.
includes
(
item
.
value
)));
},
});
// 记录原始order 序列
...
...
@@ -332,6 +348,8 @@
// Control whether the serial number column is displayed
function
handleIndexCheckChange
(
e
:
CheckboxChangeEvent
)
{
isSetPropsFromThis
=
true
;
isSetColumnsFromThis
=
true
;
table
.
setProps
({
showIndexColumn
:
e
.
target
.
checked
,
});
...
...
@@ -339,6 +357,8 @@
// Control whether the check box is displayed
function
handleSelectCheckChange
(
e
:
CheckboxChangeEvent
)
{
isSetPropsFromThis
=
true
;
isSetColumnsFromThis
=
true
;
table
.
setProps
({
rowSelection
:
e
.
target
.
checked
?
defaultRowSelection
:
undefined
,
});
...
...
@@ -360,11 +380,14 @@
if
(
isFixed
&&
!
item
.
width
)
{
item
.
width
=
100
;
}
updateSortOption
(
item
);
table
.
setCacheColumnsByField
?.(
item
.
dataIndex
as
string
,
{
fixed
:
isFixed
});
setColumns
(
columns
);
}
function
setColumns
(
columns
:
BasicColumn
[]
|
string
[])
{
isSetPropsFromThis
=
true
;
isSetColumnsFromThis
=
true
;
table
.
setColumns
(
columns
);
const
data
:
ColumnChangeParam
[]
=
unref
(
plainSortOptions
).
map
((
col
)
=>
{
const
visible
=
...
...
@@ -384,6 +407,14 @@
:
getParentContainer
();
}
function
updateSortOption
(
column
:
BasicColumn
)
{
plainSortOptions
.
value
.
forEach
((
item
)
=>
{
if
(
item
.
value
===
column
.
dataIndex
)
{
Object
.
assign
(
item
,
column
);
}
});
}
return
{
t
,
...
toRefs
(
state
),
...
...
src/components/Table/src/hooks/useColumns.ts
浏览文件 @
b97d5883
...
...
@@ -260,6 +260,10 @@ export function useColumns(
function
getCacheColumns
()
{
return
cacheColumns
;
}
function
setCacheColumns
(
columns
:
BasicColumn
[])
{
if
(
!
isArray
(
columns
))
return
;
cacheColumns
=
columns
.
filter
((
item
)
=>
!
item
.
flag
);
}
return
{
getColumnsRef
,
...
...
@@ -268,6 +272,7 @@ export function useColumns(
setColumns
,
getViewColumns
,
setCacheColumnsByField
,
setCacheColumns
,
};
}
...
...
src/components/Table/src/types/table.ts
浏览文件 @
b97d5883
...
...
@@ -116,6 +116,7 @@ export interface TableActionType {
setShowPagination
:
(
show
:
boolean
)
=>
Promise
<
void
>
;
getShowPagination
:
()
=>
boolean
;
setCacheColumnsByField
?:
(
dataIndex
:
string
|
undefined
,
value
:
BasicColumn
)
=>
void
;
setCacheColumns
?:
(
columns
:
BasicColumn
[])
=>
void
;
}
export
interface
FetchSetting
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录