Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
夏日掠影
vue-vben-admin
提交
125a7d14
V
vue-vben-admin
项目概览
夏日掠影
/
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,发现更多精彩内容 >>
提交
125a7d14
编写于
6月 07, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(table): support columns-change event
添加列改变事件(含排序、可见性、固定列)。该事件仅由表格设置组件中人为触发。
上级
966571bd
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
91 addition
and
21 deletion
+91
-21
src/components/Table/src/BasicTable.vue
src/components/Table/src/BasicTable.vue
+17
-2
src/components/Table/src/components/TableHeader.vue
src/components/Table/src/components/TableHeader.vue
+12
-4
src/components/Table/src/components/settings/ColumnSetting.vue
...omponents/Table/src/components/settings/ColumnSetting.vue
+22
-7
src/components/Table/src/components/settings/index.vue
src/components/Table/src/components/settings/index.vue
+9
-4
src/components/Table/src/hooks/useTableHeader.ts
src/components/Table/src/hooks/useTableHeader.ts
+7
-2
src/components/Table/src/types/table.ts
src/components/Table/src/types/table.ts
+12
-0
src/views/demo/table/Basic.vue
src/views/demo/table/Basic.vue
+8
-1
src/views/demo/table/UseTable.vue
src/views/demo/table/UseTable.vue
+4
-1
未找到文件。
src/components/Table/src/BasicTable.vue
浏览文件 @
125a7d14
...
@@ -32,13 +32,19 @@
...
@@ -32,13 +32,19 @@
</div>
</div>
</template>
</template>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
type
{
BasicTableProps
,
TableActionType
,
SizeType
}
from
'
./types/table
'
;
import
type
{
BasicTableProps
,
TableActionType
,
SizeType
,
ColumnChangeParam
,
}
from
'
./types/table
'
;
import
{
defineComponent
,
ref
,
computed
,
unref
,
toRaw
}
from
'
vue
'
;
import
{
defineComponent
,
ref
,
computed
,
unref
,
toRaw
}
from
'
vue
'
;
import
{
Table
}
from
'
ant-design-vue
'
;
import
{
Table
}
from
'
ant-design-vue
'
;
import
{
BasicForm
,
useForm
}
from
'
/@/components/Form/index
'
;
import
{
BasicForm
,
useForm
}
from
'
/@/components/Form/index
'
;
import
expandIcon
from
'
./components/ExpandIcon
'
;
import
expandIcon
from
'
./components/ExpandIcon
'
;
import
HeaderCell
from
'
./components/HeaderCell.vue
'
;
import
HeaderCell
from
'
./components/HeaderCell.vue
'
;
import
{
InnerHandlers
}
from
'
./types/table
'
;
import
{
usePagination
}
from
'
./hooks/usePagination
'
;
import
{
usePagination
}
from
'
./hooks/usePagination
'
;
import
{
useColumns
}
from
'
./hooks/useColumns
'
;
import
{
useColumns
}
from
'
./hooks/useColumns
'
;
...
@@ -83,6 +89,7 @@
...
@@ -83,6 +89,7 @@
'
edit-change
'
,
'
edit-change
'
,
'
expanded-rows-change
'
,
'
expanded-rows-change
'
,
'
change
'
,
'
change
'
,
'
columns-change
'
,
],
],
setup
(
props
,
{
attrs
,
emit
,
slots
})
{
setup
(
props
,
{
attrs
,
emit
,
slots
})
{
const
tableElRef
=
ref
<
ComponentRef
>
(
null
);
const
tableElRef
=
ref
<
ComponentRef
>
(
null
);
...
@@ -177,7 +184,15 @@
...
@@ -177,7 +184,15 @@
const
{
getExpandOption
,
expandAll
,
collapseAll
}
=
useTableExpand
(
getProps
,
tableData
,
emit
);
const
{
getExpandOption
,
expandAll
,
collapseAll
}
=
useTableExpand
(
getProps
,
tableData
,
emit
);
const
{
getHeaderProps
}
=
useTableHeader
(
getProps
,
slots
);
const
handlers
:
InnerHandlers
=
{
onColumnsChange
:
(
data
:
ColumnChangeParam
[])
=>
{
emit
(
'
columns-change
'
,
data
);
// support useTable
unref
(
getProps
).
onColumnsChange
?.(
data
);
},
};
const
{
getHeaderProps
}
=
useTableHeader
(
getProps
,
slots
,
handlers
);
const
{
getFooterProps
}
=
useTableFooter
(
const
{
getFooterProps
}
=
useTableFooter
(
getProps
,
getProps
,
...
...
src/components/Table/src/components/TableHeader.vue
浏览文件 @
125a7d14
...
@@ -6,11 +6,15 @@
...
@@ -6,11 +6,15 @@
<div
:class=
"`$
{prefixCls}__toolbar`">
<div
:class=
"`$
{prefixCls}__toolbar`">
<slot
name=
"toolbar"
></slot>
<slot
name=
"toolbar"
></slot>
<Divider
type=
"vertical"
v-if=
"$slots.toolbar && showTableSetting"
/>
<Divider
type=
"vertical"
v-if=
"$slots.toolbar && showTableSetting"
/>
<TableSetting
:setting=
"tableSetting"
v-if=
"showTableSetting"
/>
<TableSetting
:setting=
"tableSetting"
v-if=
"showTableSetting"
@
columns-change=
"handleColumnChange"
/>
</div>
</div>
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
type
{
TableSetting
}
from
'
../types/table
'
;
import
type
{
TableSetting
,
ColumnChangeParam
}
from
'
../types/table
'
;
import
type
{
PropType
}
from
'
vue
'
;
import
type
{
PropType
}
from
'
vue
'
;
import
{
defineComponent
}
from
'
vue
'
;
import
{
defineComponent
}
from
'
vue
'
;
...
@@ -42,9 +46,13 @@
...
@@ -42,9 +46,13 @@
default
:
''
,
default
:
''
,
},
},
},
},
setup
()
{
emits
:
[
'
columns-change
'
],
setup
(
_
,
{
emit
})
{
const
{
prefixCls
}
=
useDesign
(
'
basic-table-header
'
);
const
{
prefixCls
}
=
useDesign
(
'
basic-table-header
'
);
return
{
prefixCls
};
function
handleColumnChange
(
data
:
ColumnChangeParam
[])
{
emit
(
'
columns-change
'
,
data
);
}
return
{
prefixCls
,
handleColumnChange
};
},
},
});
});
</
script
>
</
script
>
...
...
src/components/Table/src/components/settings/ColumnSetting.vue
浏览文件 @
125a7d14
...
@@ -114,7 +114,7 @@
...
@@ -114,7 +114,7 @@
import
{
getPopupContainer
}
from
'
/@/utils
'
;
import
{
getPopupContainer
}
from
'
/@/utils
'
;
import
{
omit
}
from
'
lodash-es
'
;
import
{
omit
}
from
'
lodash-es
'
;
import
type
{
BasicColumn
}
from
'
../../types/table
'
;
import
type
{
BasicColumn
,
ColumnChangeParam
}
from
'
../../types/table
'
;
interface
State
{
interface
State
{
checkAll
:
boolean
;
checkAll
:
boolean
;
...
@@ -141,8 +141,9 @@
...
@@ -141,8 +141,9 @@
Divider
,
Divider
,
Icon
,
Icon
,
},
},
emits
:
[
'
columns-change
'
],
setup
()
{
setup
(
_
,
{
emit
}
)
{
const
{
t
}
=
useI18n
();
const
{
t
}
=
useI18n
();
const
table
=
useTableContext
();
const
table
=
useTableContext
();
...
@@ -234,10 +235,10 @@
...
@@ -234,10 +235,10 @@
const
checkList
=
plainOptions
.
value
.
map
((
item
)
=>
item
.
value
);
const
checkList
=
plainOptions
.
value
.
map
((
item
)
=>
item
.
value
);
if
(
e
.
target
.
checked
)
{
if
(
e
.
target
.
checked
)
{
state
.
checkedList
=
checkList
;
state
.
checkedList
=
checkList
;
table
.
setColumns
(
checkList
);
setColumns
(
checkList
);
}
else
{
}
else
{
state
.
checkedList
=
[];
state
.
checkedList
=
[];
table
.
setColumns
([]);
setColumns
([]);
}
}
}
}
...
@@ -257,7 +258,7 @@
...
@@ -257,7 +258,7 @@
checkedList
.
sort
((
prev
,
next
)
=>
{
checkedList
.
sort
((
prev
,
next
)
=>
{
return
sortList
.
indexOf
(
prev
)
-
sortList
.
indexOf
(
next
);
return
sortList
.
indexOf
(
prev
)
-
sortList
.
indexOf
(
next
);
});
});
table
.
setColumns
(
checkedList
);
setColumns
(
checkedList
);
}
}
// reset columns
// reset columns
...
@@ -266,7 +267,7 @@
...
@@ -266,7 +267,7 @@
state
.
checkAll
=
true
;
state
.
checkAll
=
true
;
plainOptions
.
value
=
unref
(
cachePlainOptions
);
plainOptions
.
value
=
unref
(
cachePlainOptions
);
plainSortOptions
.
value
=
unref
(
cachePlainOptions
);
plainSortOptions
.
value
=
unref
(
cachePlainOptions
);
table
.
setColumns
(
table
.
getCacheColumns
());
setColumns
(
table
.
getCacheColumns
());
}
}
// Open the pop-up window for drag and drop initialization
// Open the pop-up window for drag and drop initialization
...
@@ -298,7 +299,7 @@
...
@@ -298,7 +299,7 @@
plainSortOptions
.
value
=
columns
;
plainSortOptions
.
value
=
columns
;
plainOptions
.
value
=
columns
;
plainOptions
.
value
=
columns
;
table
.
setColumns
(
columns
);
setColumns
(
columns
);
},
},
});
});
initSortable
();
initSortable
();
...
@@ -335,7 +336,21 @@
...
@@ -335,7 +336,21 @@
item
.
width
=
100
;
item
.
width
=
100
;
}
}
table
.
setCacheColumnsByField
?.(
item
.
dataIndex
,
{
fixed
:
isFixed
});
table
.
setCacheColumnsByField
?.(
item
.
dataIndex
,
{
fixed
:
isFixed
});
setColumns
(
columns
);
}
function
setColumns
(
columns
:
BasicColumn
[]
|
string
[])
{
table
.
setColumns
(
columns
);
table
.
setColumns
(
columns
);
const
data
:
ColumnChangeParam
[]
=
unref
(
plainOptions
).
map
((
col
)
=>
{
const
visible
=
columns
.
findIndex
(
(
c
:
BasicColumn
|
string
)
=>
c
===
col
.
value
||
(
typeof
c
!==
'
string
'
&&
c
.
dataIndex
===
col
.
value
)
)
!==
-
1
;
return
{
dataIndex
:
col
.
value
,
fixed
:
col
.
fixed
,
visible
};
});
emit
(
'
columns-change
'
,
data
);
}
}
return
{
return
{
...
...
src/components/Table/src/components/settings/index.vue
浏览文件 @
125a7d14
...
@@ -2,13 +2,13 @@
...
@@ -2,13 +2,13 @@
<div
class=
"table-settings"
>
<div
class=
"table-settings"
>
<RedoSetting
v-if=
"getSetting.redo"
/>
<RedoSetting
v-if=
"getSetting.redo"
/>
<SizeSetting
v-if=
"getSetting.size"
/>
<SizeSetting
v-if=
"getSetting.size"
/>
<ColumnSetting
v-if=
"getSetting.setting"
/>
<ColumnSetting
v-if=
"getSetting.setting"
@
columns-change=
"handleColumnChange"
/>
<FullScreenSetting
v-if=
"getSetting.fullScreen"
/>
<FullScreenSetting
v-if=
"getSetting.fullScreen"
/>
</div>
</div>
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
type
{
PropType
}
from
'
vue
'
;
import
type
{
PropType
}
from
'
vue
'
;
import
type
{
TableSetting
}
from
'
../../types/table
'
;
import
type
{
TableSetting
,
ColumnChangeParam
}
from
'
../../types/table
'
;
import
{
defineComponent
,
computed
}
from
'
vue
'
;
import
{
defineComponent
,
computed
}
from
'
vue
'
;
...
@@ -33,7 +33,8 @@
...
@@ -33,7 +33,8 @@
default
:
()
=>
({}),
default
:
()
=>
({}),
},
},
},
},
setup
(
props
)
{
emits
:
[
'
columns-change
'
],
setup
(
props
,
{
emit
})
{
const
{
t
}
=
useI18n
();
const
{
t
}
=
useI18n
();
const
getSetting
=
computed
(():
TableSetting
=>
{
const
getSetting
=
computed
(():
TableSetting
=>
{
...
@@ -46,7 +47,11 @@
...
@@ -46,7 +47,11 @@
};
};
});
});
return
{
getSetting
,
t
};
function
handleColumnChange
(
data
:
ColumnChangeParam
[])
{
emit
(
'
columns-change
'
,
data
);
}
return
{
getSetting
,
t
,
handleColumnChange
};
},
},
});
});
</
script
>
</
script
>
...
...
src/components/Table/src/hooks/useTableHeader.ts
浏览文件 @
125a7d14
import
type
{
ComputedRef
,
Slots
}
from
'
vue
'
;
import
type
{
ComputedRef
,
Slots
}
from
'
vue
'
;
import
type
{
BasicTableProps
}
from
'
../types/table
'
;
import
type
{
BasicTableProps
,
InnerHandlers
}
from
'
../types/table
'
;
import
{
unref
,
computed
,
h
}
from
'
vue
'
;
import
{
unref
,
computed
,
h
}
from
'
vue
'
;
import
TableHeader
from
'
../components/TableHeader.vue
'
;
import
TableHeader
from
'
../components/TableHeader.vue
'
;
...
@@ -7,7 +7,11 @@ import TableHeader from '../components/TableHeader.vue';
...
@@ -7,7 +7,11 @@ import TableHeader from '../components/TableHeader.vue';
import
{
isString
}
from
'
/@/utils/is
'
;
import
{
isString
}
from
'
/@/utils/is
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
export
function
useTableHeader
(
propsRef
:
ComputedRef
<
BasicTableProps
>
,
slots
:
Slots
)
{
export
function
useTableHeader
(
propsRef
:
ComputedRef
<
BasicTableProps
>
,
slots
:
Slots
,
handlers
:
InnerHandlers
)
{
const
getHeaderProps
=
computed
(():
Recordable
=>
{
const
getHeaderProps
=
computed
(():
Recordable
=>
{
const
{
title
,
showTableSetting
,
titleHelpMessage
,
tableSetting
}
=
unref
(
propsRef
);
const
{
title
,
showTableSetting
,
titleHelpMessage
,
tableSetting
}
=
unref
(
propsRef
);
const
hideTitle
=
!
slots
.
tableTitle
&&
!
title
&&
!
slots
.
toolbar
&&
!
showTableSetting
;
const
hideTitle
=
!
slots
.
tableTitle
&&
!
title
&&
!
slots
.
toolbar
&&
!
showTableSetting
;
...
@@ -26,6 +30,7 @@ export function useTableHeader(propsRef: ComputedRef<BasicTableProps>, slots: Sl
...
@@ -26,6 +30,7 @@ export function useTableHeader(propsRef: ComputedRef<BasicTableProps>, slots: Sl
titleHelpMessage
,
titleHelpMessage
,
showTableSetting
,
showTableSetting
,
tableSetting
,
tableSetting
,
onColumnsChange
:
handlers
.
onColumnsChange
,
}
as
Recordable
,
}
as
Recordable
,
{
{
...(
slots
.
toolbar
...(
slots
.
toolbar
...
...
src/components/Table/src/types/table.ts
浏览文件 @
125a7d14
...
@@ -381,6 +381,8 @@ export interface BasicTableProps<T = any> {
...
@@ -381,6 +381,8 @@ export interface BasicTableProps<T = any> {
* @param expandedRows
* @param expandedRows
*/
*/
onExpandedRowsChange
?:
(
expandedRows
:
string
[]
|
number
[])
=>
void
;
onExpandedRowsChange
?:
(
expandedRows
:
string
[]
|
number
[])
=>
void
;
onColumnsChange
?:
(
data
:
ColumnChangeParam
[])
=>
void
;
}
}
export
type
CellFormat
=
export
type
CellFormat
=
...
@@ -427,3 +429,13 @@ export interface BasicColumn extends ColumnProps {
...
@@ -427,3 +429,13 @@ export interface BasicColumn extends ColumnProps {
// 业务控制是否显示
// 业务控制是否显示
ifShow
?:
boolean
|
((
column
:
BasicColumn
)
=>
boolean
);
ifShow
?:
boolean
|
((
column
:
BasicColumn
)
=>
boolean
);
}
}
export
type
ColumnChangeParam
=
{
dataIndex
:
string
;
fixed
:
boolean
|
'
left
'
|
'
right
'
|
undefined
;
visible
:
boolean
;
};
export
interface
InnerHandlers
{
onColumnsChange
:
(
data
:
ColumnChangeParam
[])
=>
void
;
}
src/views/demo/table/Basic.vue
浏览文件 @
125a7d14
...
@@ -11,6 +11,7 @@
...
@@ -11,6 +11,7 @@
:bordered=
"border"
:bordered=
"border"
showTableSetting
showTableSetting
:pagination=
"pagination"
:pagination=
"pagination"
@
columns-change=
"handleColumnChange"
>
>
<template
#toolbar
>
<template
#toolbar
>
<a-button
type=
"primary"
@
click=
"toggleCanResize"
>
<a-button
type=
"primary"
@
click=
"toggleCanResize"
>
...
@@ -29,7 +30,7 @@
...
@@ -29,7 +30,7 @@
</template>
</template>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
ref
}
from
'
vue
'
;
import
{
defineComponent
,
ref
}
from
'
vue
'
;
import
{
BasicTable
}
from
'
/@/components/Table
'
;
import
{
BasicTable
,
ColumnChangeParam
}
from
'
/@/components/Table
'
;
import
{
getBasicColumns
,
getBasicData
}
from
'
./tableData
'
;
import
{
getBasicColumns
,
getBasicData
}
from
'
./tableData
'
;
export
default
defineComponent
({
export
default
defineComponent
({
...
@@ -56,6 +57,11 @@
...
@@ -56,6 +57,11 @@
function
toggleBorder
()
{
function
toggleBorder
()
{
border
.
value
=
!
border
.
value
;
border
.
value
=
!
border
.
value
;
}
}
function
handleColumnChange
(
data
:
ColumnChangeParam
[])
{
console
.
log
(
'
ColumnChanged
'
,
data
);
}
return
{
return
{
columns
:
getBasicColumns
(),
columns
:
getBasicColumns
(),
data
:
getBasicData
(),
data
:
getBasicData
(),
...
@@ -68,6 +74,7 @@
...
@@ -68,6 +74,7 @@
toggleLoading
,
toggleLoading
,
toggleBorder
,
toggleBorder
,
pagination
,
pagination
,
handleColumnChange
,
};
};
},
},
});
});
...
...
src/views/demo/table/UseTable.vue
浏览文件 @
125a7d14
...
@@ -20,7 +20,7 @@
...
@@ -20,7 +20,7 @@
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
defineComponent
}
from
'
vue
'
;
import
{
BasicTable
,
useTable
}
from
'
/@/components/Table
'
;
import
{
BasicTable
,
ColumnChangeParam
,
useTable
}
from
'
/@/components/Table
'
;
import
{
getBasicColumns
,
getBasicShortColumns
}
from
'
./tableData
'
;
import
{
getBasicColumns
,
getBasicShortColumns
}
from
'
./tableData
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
import
{
demoListApi
}
from
'
/@/api/demo/table
'
;
import
{
demoListApi
}
from
'
/@/api/demo/table
'
;
...
@@ -58,6 +58,9 @@
...
@@ -58,6 +58,9 @@
rowSelection
:
{
rowSelection
:
{
type
:
'
checkbox
'
,
type
:
'
checkbox
'
,
},
},
onColumnsChange
:
(
data
:
ColumnChangeParam
[])
=>
{
console
.
log
(
'
ColumnsChanged
'
,
data
);
},
});
});
function
changeLoading
()
{
function
changeLoading
()
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录