feat(FileTable): 添加多选模式切换功能
添加多选按钮用于切换表格的选择模式,当退出多选模式时清空已选项
This commit is contained in:
parent
302175e0b0
commit
f8ee1df96c
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user