如何获取PrimeVue DataTable应用筛选规则后的过滤数组？

方法1：通过组件实例的内置属性直接获取 #

PrimeVue DataTable 组件本身暴露了filteredValue内置属性，存储的就是当前应用所有筛选规则后的结果数组，你可以通过给组件绑定ref来访问：

• Vue3 组合式API示例：

<template>
  <DataTable 
    ref="dtRef"
    :value="originalList" 
    :filters="filters"
    :globalFilter="globalFilter"
  >
    <!-- 列配置省略 -->
  </DataTable>
  <button @click="getFilteredList">获取筛选结果</button>
</template>

<script setup>
import { ref } from 'vue'
import DataTable from 'primevue/datatable'

const dtRef = ref(null)
const originalList = ref([]) // 你的原始全量数组

const getFilteredList = () => {
  // 组件挂载后才可以访问到
  if (dtRef.value) {
    const filteredResult = dtRef.value.filteredValue
    console.log('筛选后的数组：', filteredResult)
    // 此处处理业务逻辑
  }
}
</script>

• Vue2 选项式API示例：

<template>
  <DataTable 
    ref="dt"
    :value="originalList" 
    :filters="filters"
  >
    <!-- 列配置省略 -->
  </DataTable>
</template>

<script>
export default {
  data() {
    return {
      originalList: [],
      filters: {}
    }
  },
  methods: {
    getFilteredResult() {
      const filteredList = this.$refs.dt.filteredValue
      // 此处处理业务逻辑
    }
  }
}
</script>

方法2：通过filter事件实时获取筛选结果 #

如果你需要在每次筛选条件变更时自动拿到最新的筛选结果，可以绑定DataTable的filter事件，事件回调参数会直接返回筛选后的数组：

<template>
  <DataTable 
    :value="originalList" 
    :filters="filters"
    @filter="handleFilter"
  >
    <!-- 列配置省略 -->
  </DataTable>
</template>

<script setup>
const handleFilter = (e) => {
  const filteredResult = e.filteredValue
  console.log('最新筛选结果：', filteredResult)
}
</script>

注意事项 #

• 如果你开启了DataTable的懒加载模式（lazy="true"），上述两个方法都不适用，因为懒加载模式下筛选、分页都是服务端处理，组件不会维护筛选后的数组，你需要自己在服务端返回筛选结果时存储对应的数组。
• 访问ref绑定的组件实例时，需要确保组件已经完成挂载，否则会返回undefined。

内容的提问来源于stack exchange，提问作者Ashraful