【Vue3】表格动态显示、隐藏列字段

通过 Naive-UI 的数据表格组件为例，实现表格动态显示、隐藏列字段：

<template>
	<!-- 打开弹窗按钮 -->
	<n-button @click="filterModal = true">
      <template #icon>
            <n-icon>
                <ClearAllOutlined />
            </n-icon>
        </template>
        筛选
    </n-button>
    <!-- 筛选表格列字段显示、隐藏弹窗 -->
    <n-modal title="表格字段筛选" v-model:show="filterModal" preset="card" style="width: 600px;">
		<n-data-table v-model:checked-row-keys="zdCheckedRowKeys" :single-line="false" :columns="zdColumns" 
			:data="zdData" :row-key="zdRowKey" :max-height="500" @update:checked-row-keys="filterCol" />
    </n-modal>

	<!-- 表格 -->
	<n-data-table v-model:checked-row-keys="checkedRowKeys" :single-line="false" :columns="columns" 
		:data="data" :row-key="rowKey" :loading="loading" :scroll-x="scrollX" :max-height="500" />
</template>

<script lang="ts" setup>
	import { ref, onMounted } from "vue";
	import { ClearAllOutlined } from '@vicons/material'

	// 表格数据
	const loading = ref(false)
	const scrollX = ref(0)
	const checkedRowKeys = ref<Array<any>>([])
	const rowKey = (row: any) => row
	const data= ref<Array<any>>([])
	const recordColumns: any = [
	    { type: 'selection', title: '复选框', key: 'checkbox', width: 60 },
	    { title: '苹果', key: 'apple', width: 100 },
	    { title: '芒果', key: 'mango', width: 100 },
	    { title: '火龙果', key: 'pitaya', width: 100 },
	    { title: '西瓜', key: 'watermelon', width: 100 },
	    { title: '禁用列', key: 'disabled', width: 100 },
	]
	// 动态列深拷贝
	let columns: any = recordColumns.slice()

	// 筛选弹窗
	const filterModal = ref(false)
	const zdCheckedRowKeys = ref<Array<any>>([])
	const zdRowKey = (row: any) => row.title
	const zdData = ref<Array<any>>([])
	const zdColumns: any = [
	    {
	        type: 'selection',
	        width: 60,
	        disabled(row: any) {
	        	// 禁用【复选框】和【禁用列】（设置这两列不能隐藏）
	            return row.title == '复选框' || row.title == '禁用列'
	        }
	    },
	    {
	        title: '字段名',
	        key: 'title'
	    }
	]

	onMounted(() => {
	    // 获取所有字段名称，且筛选复选框全选
	    recordColumns.forEach((item: any) => {
	        zdData.value.push({ title: item.title })
	        zdCheckedRowKeys.value.push(item.title);
	    })

		// 动态获取表格宽度（如果表格字段非常多，较少可注释改该行）
		getTableWidth(columns, 0)
	})
	
	// 筛选表格更新后，过滤字段列
	function filterCol(value:any){
		// 必须要重新刷新表格 loading
	    loading.value = true;
	    // 刷新表格列
	    columns = recordColumns.filter((item: any) => value.includes(item.title) )
	    // 表格宽度重新赋值（如果表格字段非常多时调用，较少可注释改该行）
	    scrollX.value = getTableWidth(columns, 0)
	    
	    loading.value = false;
	}
	// 动态计算表格宽度（如果表格字段非常多时调用，较少可注释改方法）
	function getTableWidth(arr: any, preWidth: any){
	    var addWidth = preWidth;
	    arr.forEach((item: any) => {
	        if(item.children){
	            addWidth += getTableWidth(item.children, 0);
	        }else{
	            addWidth += item.width;
	        }
	    })
	
	    return addWidth;
	}
</script>

实现结果：