如何在PrimeVue DataTable中获取筛选后的数组（Vue CDN场景）

通过CDN引入Vue为现有网站部分页面添加渐进式响应式功能，使用PrimeVue DataTable时，UI端筛选功能正常，但无法获取用户筛选后的行列表。此前参考过相关问题，但已采纳答案未说明JavaScript层面的访问方法，Vue开发者工具也未找到对应属性。

Filters are stored as an object in your local state. Try using the Vue.js devtools extension to see the format of that object.

核心问题：使用DataTable内置的filters属性时，如何获取筛选后的数组？

示例场景：通过filters属性应用“Bob”筛选后，点击“Show Alert”按钮，弹窗应显示所有符合条件的客户（Bob Smith、Bob Jones、Bob Tailor）。

示例代码：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>
<div id="app">
  <input type="text" v-model="customerFilters['global'].value" />
  Searching for: {{customerFilters['global'].value}}
  <p-datatable :value="customers" :filters="customerFilters">
    <p-column field="fullname" header="Full Name"></p-column>
    <p-column field="sales" header="Total Sales"></p-column>
  </p-datatable>
  <button @click="showAlert">Show Alert</button>
</div>
<script>
  const { createApp, ref } = Vue
  const customers = ref([
    { fullname: "Bob Smith", sales: 11 },
    { fullname: "Bob Jones", sales: 22 },
    { fullname: "Bob Tailor", sales: 33 },
    { fullname: "Fred Bloggs", sales: 44 },
    { fullname: "Fred Baker", sales: 55 },
    { fullname: "Tom Peterson", sales: 66 },
  ])
  const customerFilters = ref({
    global: { value: "Bob", matchMode: PrimeVue.FilterMatchMode.CONTAINS },
  })
  function showAlert() {
    let filteredCustomers = [] // ???
    let str = "Customers in filter: "
    // str += filteredCustomers[0]["fullname"] + ", "
    // str += filteredCustomers[1]["fullname"] + ", "
    // str += filteredCustomers[2]["fullname"]
    alert(str) // "Customers in filter: Bob Smith, Bob Jones, Bob Tailor"
  }
  const app = createApp({
    setup() {
      return {
        customers,
        customerFilters,
        showAlert
      }
    },
  })
  app.use(PrimeVue.Config, {
    theme: {
      preset: PrimeVue.Themes.Aura
    }
  })
  app.component("p-datatable", PrimeVue.DataTable)
  app.component("p-column", PrimeVue.Column)
  app.mount("#app")
</script>

无需放弃PrimeVue DataTable的内置高级筛选功能，直接通过组件实例的filteredValue属性即可获取筛选后的数组，具体步骤如下：

1. 给p-datatable添加ref标识，用于获取组件实例：

<p-datatable ref="dt" :value="customers" :filters="customerFilters">

2. 在setup中声明对应ref变量：

const dt = ref(null);

3. 修改showAlert函数，通过ref获取DataTable实例并访问filteredValue：

function showAlert() {
  const dtInstance = dt.value;
  let filteredCustomers = dtInstance.filteredValue || [];
  let str = "Customers in filter: " + filteredCustomers.map(item => item.fullname).join(", ");
  alert(str);
}

4. 在setup的返回对象中加入dt，确保模板能访问到：

return {
  customers,
  customerFilters,
  showAlert,
  dt
}

完整修改后的代码：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>
<div id="app">
  <input type="text" v-model="customerFilters['global'].value" />
  Searching for: {{customerFilters['global'].value}}
  <p-datatable ref="dt" :value="customers" :filters="customerFilters">
    <p-column field="fullname" header="Full Name"></p-column>
    <p-column field="sales" header="Total Sales"></p-column>
  </p-datatable>
  <button @click="showAlert">Show Alert</button>
</div>
<script>
  const { createApp, ref } = Vue
  const customers = ref([
    { fullname: "Bob Smith", sales: 11 },
    { fullname: "Bob Jones", sales: 22 },
    { fullname: "Bob Tailor", sales: 33 },
    { fullname: "Fred Bloggs", sales: 44 },
    { fullname: "Fred Baker", sales: 55 },
    { fullname: "Tom Peterson", sales: 66 },
  ])
  const customerFilters = ref({
    global: { value: "Bob", matchMode: PrimeVue.FilterMatchMode.CONTAINS },
  })
  const dt = ref(null);
  function showAlert() {
    const dtInstance = dt.value;
    let filteredCustomers = dtInstance.filteredValue || [];
    let str = "Customers in filter: " + filteredCustomers.map(item => item.fullname).join(", ");
    alert(str);
  }
  const app = createApp({
    setup() {
      return {
        customers,
        customerFilters,
        showAlert,
        dt
      }
    },
  })
  app.use(PrimeVue.Config, {
    theme: {
      preset: PrimeVue.Themes.Aura
    }
  })
  app.component("p-datatable", PrimeVue.DataTable)
  app.component("p-column", PrimeVue.Column)
  app.mount("#app")
</script>

关于思路的疑惑 #

不需要改用计算属性手动筛选数组，PrimeVue DataTable内部已经封装了完整的筛选逻辑（包括全局筛选、列筛选、多条件组合等高级功能），filteredValue就是组件处理后的最终筛选结果，直接使用该属性既保留了组件的功能，又能轻松获取筛选后的数据。

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