feat(FileTable): 添加多选模式切换功能

添加多选按钮用于切换表格的选择模式,当退出多选模式时清空已选项
This commit is contained in:
Wenjie Zhang 2026-01-02 15:02:04 +08:00
parent 302175e0b0
commit f8ee1df96c

View File

@ -33,6 +33,14 @@
title="刷新"
class="panel-action-btn"
/>
<a-button
type="text"
@click="toggleSelectionMode"
:icon="h(CheckSquare)"
title="多选"
class="panel-action-btn"
:class="{ 'active': isSelectionMode }"
/>
<!-- <a-button
@click="toggleAutoRefresh"
size="small"
@ -130,11 +138,11 @@
:pagination="paginationCompact"
v-model:expandedRowKeys="expandedRowKeys"
:custom-row="customRow"
:row-selection="{
:row-selection="isSelectionMode ? {
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
getCheckboxProps: getCheckboxProps
}"
} : null"
:locale="{
emptyText: emptyText
}">
@ -230,6 +238,7 @@ import {
ChevronLast,
Ellipsis,
FolderPlus,
CheckSquare,
} from 'lucide-vue-next';
const store = useDatabaseStore();
@ -259,6 +268,8 @@ const selectedRowKeys = computed({
set: (keys) => store.selectedRowKeys = keys,
});
const isSelectionMode = ref(false);
const expandedRowKeys = ref([]);
//
@ -288,6 +299,13 @@ const toggleExpand = (record) => {
}
};
const toggleSelectionMode = () => {
isSelectionMode.value = !isSelectionMode.value;
if (!isSelectionMode.value) {
selectedRowKeys.value = [];
}
};
const handleCreateFolder = async () => {
if (!newFolderName.value.trim()) {
message.warning('请输入文件夹名称');
@ -863,7 +881,7 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
.panel-actions {
display: flex;
align-items: center;
gap: 6px;
gap: 0px;
.action-searcher {
width: 120px;
@ -1030,6 +1048,11 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue';
/* border: 1px solid var(--main-100); */
}
.panel-action-btn.active {
color: var(--main-color);
background-color: var(--main-10);
}
.action-trigger-btn {
padding: 0;
width: 24px;