OnlineEducation-student-front/src/views/myResource/components/SelectColumn.vue

<template>
	<div class="select-column">
		<div class="text" @click="handleSetShowColumnBtnClick">
			<setting-outlined class="icon1" />
			设置显示字段
		</div>
		<!-- 对话框 当点击"设置显示列"按钮时弹出对话框 -->
		<a-modal
			title="设置表格列显隐"
			width="700px"
			v-model:visible="dialogVisible"
			@ok="dialogOk"
			@cancel="dialogVisible = false"
		>
			<!-- 多选框组件 勾选需要在表格中显示的列 -->
			<a-checkbox-group v-model:value="selectedColumn">
				<a-checkbox v-for="item in columnOptions" :key="item.value" :value="item.value">{{ item.label }}</a-checkbox>
			</a-checkbox-group>
			<template #footer>
				<a-button @click="dialogVisible = false">取 消</a-button>
				<a-button type="primary" @click="dialogOk()">确 定</a-button>
			</template>
		</a-modal>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { useMyResourceStore } from '@/store/myResource'

	import { SettingOutlined } from '@ant-design/icons-vue'

	const myResourceStore = useMyResourceStore()

	const dialogVisible = ref(false)
	const selectedColumn = ref([]) // 被选中的表格需要显示的列
	const columnOptions = ref([
		{
			value: 'extendName',
			label: '类型'
		},
		{
			value: 'fileSize',
			label: '大小'
		},
		{
			value: 'uploadTime',
			label: '修改日期'
		},
		{
			value: 'deleteTime',
			label: '删除日期'
		}
	])

	/**
	 * 设置显示列按钮点击事件
	 * @description 获取 Vuex 中存储的表格显示列
	 *              并打开对话框
	 */
	const handleSetShowColumnBtnClick = () => {
		selectedColumn.value = myResourceStore.selectedColumnList
		dialogVisible.value = true
	}

	/**
	 * 对话框 确定按钮点击事件
	 * @description 通过提交 mutation 更新表格显示列
	 *              并关闭对话框
	 */
	const dialogOk = () => {
		myResourceStore.changeSelectedColumnList(selectedColumn.value)
		dialogVisible.value = false
	}
	onMounted(() => {
		// 可以在这里进行一些初始化操作，例如从本地存储加载列设置
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';

	.select-column {
		.text {
			padding-top: 8px;
			cursor: pointer;
			&:hover {
				color: #29175b;
			}
		}
	}

	:deep(.ant-checkbox-wrapper-checked) {
		.ant-checkbox-inner {
			background-color: #29175b;
			border-color: #29175b;
		}
		.ant-checkbox + span {
			color: #29175b;
		}
	}

	:deep(.ant-btn-primary) {
		color: #fff;
		background-color: #29175b;
		border-color: #29175b;
	}

	.icon1:hover {
		color: #29175b;
	}

	:deep(.ant-btn:focus),
	:deep(.ant-btn:hover) {
		color: white;
		border-color: #a093c3;
		background-color: #a093c3;
	}
</style>