Estoy usando primevue y creando una tabla de datos que tiene la funcionalidad de ordenar, buscar y mostrar/ocultar columna . La ordenación y la búsqueda funcionan algunas veces y mostrar/ocultar no funciona en absoluto. El menú desplegable que muestra las columnas para seleccionar para mostrar/ocultar no se muestra. A continuación se muestra un fragmento del código:

 const searchResults = ref(mockDocumentData); const filters1 = ref({ 'global': {value: null, matchMode: FilterMatchMode.CONTAINS}}); const columns = ref([ { field: 'subject', header: 'TITLE' }, { field: 'description', header: 'DESCRIPTION' }, { field: 'dateOfclose', header: 'DATE OF Close' }, { field: 'dateOfInterview', header: 'DATE OF INTERVIEW' }, { field: 'Summary', header: 'SUMMARY' } ]); const selectedColumns = ref(columns.value); const onToggle = (val: string) => { selectedColumns.value = columns.value.filter((col) => val.includes(col)); } </script> <template> <DataTable :value="searchResults" responsive-layout="scroll" v-model:filters="filters1" selectionMode="single" stateStorage="session" stateKey="dt-state-demo-session" dataKey="id" > <template #header> <div style="text-align: left"> <MultiSelect :model-value="selectedColumns" :options="columns" option-label="header" placeholder="Select Columns" style="width: 20em" @update:model-value="onToggle" /> <span> <i class="pi_pi-search" /> <InputText v-model="filters1['global'].value" placeholder="Global Search" /> </span> </div> </template> <Column v-for="(col, index) of selectedColumns" :key="col.field + '_' + index" :field="col.field" :header="col.header" :sortable="true"></Column> </DataTable> </template>

Aquí está el código .