antdvue列设置组件（本地缓存）

filterColumns下的index.vue

<template>
	<a-button type="primary" @click="showDrawer" class="ml-2">列设置</a-button>
	<a-drawer title="列设置" placement="right" :closable="false" v-model:visible="visible"
		:after-visible-change="afterVisibleChange" width="300">
		<div :style="{ borderBottom: '1px solid #E9E9E9' }">
			<a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">
				全选
			</a-checkbox>
			<span style="float: right;">已选择 {{checkedList.length}} 个 </span>
		</div>
		<br />
		<a-checkbox-group v-model:value="checkedList" @change="onAppChange">
			<a-checkbox :value="item.key" v-for="(item,idx) in plainOptions" :checked="item.show"  @change="(e) => onAppChangeItem(e,idx,item)">
				{{item.title}}
			</a-checkbox>
		</a-checkbox-group>
		<a-button type="primary" @click="onSubmit">确定</a-button>
		<a-button style="margin-left: 10px" @click="visible = false">取消</a-button>
	</a-drawer>
</template>

<script lang="ts">
	import {
		defineComponent,
		reactive,
		toRefs,
		watch,
		ref,
		onMounted
	} from 'vue';
	import {
		message,
		Modal
	} from 'ant-design-vue';
	// import {routes} from "/@/router/resolve.ts"
	export default defineComponent({
		name: "filterColumns",
		props: ['columns', "checkeds", "path"],
		setup(props, {
			emit
		}) {
			const indeterminate = ref < boolean > (false);
			const checkAll = ref < boolean > (false);
			const noCheck = ref < boolean > (false);
			const checkedList = ref([])
			const unLockList = ref([])
			// 列表数据
			const plainOptions = ref([]);
			// 选择/取消全部
			const onCheckAllChange = (e: any) => {
				const arr = [];
				plainOptions.value.forEach(res => {
					res.show = e.target.checked
					if(res.show){
						arr.push(res.key)
					}
					
				});
				if (e.target.checked) {
					noCheck.value = false
					checkedList.value = arr
				} else {
					checkedList.value = []
				}
					// console.log('plainOptions', plainOptions.value);
				indeterminate.value = false
				checkAll.value = e.target.checked
			}
			// 选择与全选的checkbox状态关联
			const onAppChange = (checkedList: any) => {
				// console.log(checkedList)
				if (checkedList.length !== 0) {
					noCheck.value = false
				}
				// console.log(checkedList.length,unLockList.value.length)
				indeterminate.value = !!checkedList.length && checkedList.length < unLockList.value.length;
				checkAll.value = checkedList.length === unLockList.value.length;
			}
			// 选择与全选的checkbox状态关联
			const onAppChangeItem = (e: any,idx,item) => {
				plainOptions.value[idx].show = e.target.checked
				// console.log(item)
			}
			// 保存
			const onSubmit = () => {
				// console.log(plainOptions.value)
				if (plainOptions.value.length == 0) {
					message.warn('至少选择一项');
					return
				}
				//写入缓存
				let history = localStorage.getItem("fs-crud.columnsFilter");
				history ? (history = JSON.parse(history)) : (history = {});
				const key = props.path;
				history[key] = plainOptions.value;
				localStorage.setItem("fs-crud.columnsFilter", JSON.stringify(history));
				//返回数据
				emit("columns-change", plainOptions.value);
				visible.value = false
			}

			// 抽屉
			const visible = ref < boolean > (false);
			const afterVisibleChange = (bool: boolean) => {
				// console.log('visible', bool);
			};
			const showDrawer = () => {
				checkedList.value = []
				visible.value = true;
				plainOptions.value = props.columns.filter(item => {
					if (item.title != undefined && item.key != "operation") {
						return item
					}
				});
				// console.log(plainOptions.value)
				let checkeds = []
				props.checkeds.forEach(item => {
					if (item.title != undefined && item.key != "operation" && item.show) {
						checkedList.value.push(item.key)
						checkeds.push(item)
					}
				})
				const unList = plainOptions.value.filter(l => l);
				unLockList.value = unList
				onAppChange(checkeds)
			};

			onMounted(() => {


			})
			return {
				visible,
				afterVisibleChange,
				showDrawer,
				checkAll,
				indeterminate,
				onCheckAllChange,
				checkedList,
				plainOptions,
				onAppChange,
				onAppChangeItem,
				onSubmit
			};
		},
	});
</script>

<style scoped lang="less">
	.ant-checkbox-group {
		display: flex;
		flex-direction: column;

		/* align-items: center; */
		/deep/ .ant-checkbox-wrapper {
			margin: 0 !important;
			margin-bottom: 10px !important;
		}
	}
</style>

使用列设置的表格页面

<template>
	<div class="homePage flexBox">
		<div class="tabSty">
			<FilterColumns :columns="columnsList" @columns-change="handleColumnsChange" checkeds="columns" :path="path"/>
			<a-table class="mt-2" size="small" :columns="columns.filter((col,num)=>{if(col.show){return col}})" :data-source="result" :scroll="{ y: 550 }">
				<!-- 操作 -->
				<template #operation="{ text , record}" v-slot="bodyCell">
					<a>查看</a>
					<a-divider type="vertical" />
					<a>删除</a>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script lang="ts">
	import {
		defineComponent,
		reactive,
		ref,
		onMounted,
		createVNode,
		nextTick
	} from 'vue';
	import * as api from '../api.js'
	import {
		ArrowUpOutlined,
		ExclamationCircleOutlined
	} from '@ant-design/icons-vue';
	import {
		message,
		Modal
	} from 'ant-design-vue';
	import {
		useRouter
	} from "vue-router";
	import FilterColumns from '/@/components/filterColumns/index.vue'
	export default defineComponent({
		name:"supplierList",
		components: {
			ArrowUpOutlined,
			ExclamationCircleOutlined,
			FilterColumns
		},
		setup(props, context) {
			let path = useRouter().currentRoute.value.fullPath
			// 表格表头
			const columns = ref([{
					title: '序号',
					dataIndex: 'id',
					key: 'id',
					width: '5%',
					slots: {
						customRender: 'id'
					},
				},
				{
					title: '供应商名称',
					dataIndex: 'companyName',
					key: 'companyName',
					width: '13%',
				},
				{
					title: '税务编号',
					dataIndex: 'taxNumber',
					key: 'taxNumber',
					width: '10%',
				},
				{
					title: '账户类型',
					dataIndex: 'bankType',
					key: 'bankType',
					slots: {
						customRender: 'bankType'
					},
					width: '8%',
				},
				{
					title: '开户行',
					dataIndex: 'bankOfDeposit',
					key: 'bankOfDeposit',
					width: '10%',
					slots: {
						customRender: 'bankOfDeposit'
					},
				},
				{
					title: '银行账号',
					dataIndex: 'bankAccount',
					key: 'bankAccount',
					width: '12%',
					slots: {
						customRender: 'bankAccount'
					},
				},
				{
					title: '联系人',
					dataIndex: 'name',
					key: 'name',
					width: '8%',
				},
				{
					title: '联系电话',
					dataIndex: 'phoneNumber',
					key: 'phoneNumber',
					width: '10%',
				},
				{
					title: '创建时间',
					dataIndex: 'createTime',
					key: 'createTime',
					width: '14%',
				},
				{
					title: '操作',
					dataIndex: 'operation',
					key: 'operation',
					slots: {
						customRender: 'operation'
					},
					width: '10%',
					fixed: 'right'
				},
			])
			const result = reactive([
				{
					id:1,
					companyName:'一只miu',
					taxNumber:'aaabb123',
					bankType:'公司账户',
					bankOfDeposit:'中国民生银行',
					bankAccount:'8882822999292922',
					name:'知知',
					phoneNumber:'18729873655',
					createTime:'2022-04-02 17:22:17'
				},
				{
					id:2,
					companyName:'达达鸦有限公司',
					taxNumber:'1000002118',
					bankType:'公司账户',
					bankOfDeposit:'中国银行',
					bankAccount:'X626393978276',
					name:'陈先生',
					phoneNumber:'15378659871',
					createTime:'2022-04-13 10:26:09'
				}
			])
			const orderListRef = ref()
			let columnsList = ref([])
			//获取列表设置
			const getColumnSetting = () => {
				nextTick(() => {
					columnsList.value = columns.value.map(item => {
						let data = {
							key: item.key,
							show: item.show,
							title: item.title
						}
						if(item.children && item.children.length > 0){
							data.title = item.title + '-' + item.children[0].title
						}
						return data
					});
				});
				//读取缓存记录
				let history = localStorage.getItem(`fs-crud.columnsFilter`);
				history ? (history = JSON.parse(history)) : (history = {});
				const historyCurrentTable = history[path];
				console.log(historyCurrentTable)
				if (historyCurrentTable) {
					historyCurrentTable.forEach(item => {
						columns.value.forEach(val => {
							if (item.key == val.key) {
								val.show = item.show
							}
							if(val.key == 'operation') val.show = true
						})
					})
				}else{
					columns.value.forEach(val => {
						val.show = true
					})
				}
			
			}
			//改变列表项操作
			const handleColumnsChange = (showList) => {
				showList.forEach(item => {
					columns.value.forEach(val => {
						if (item.key == val.key) {
							val.show = item.show
						}
					})
				})
			}
			return {
				columns,
				result,
				columnsList,
				handleColumnsChange,
				path
			};
		},
	});
</script>

示例图：