巧用 slot="header"，让 el-table 筛选数据不掉队

2024-01-09 05:38:10

使用 slot="header" 解决 el-table 异步数据筛选渲染问题

解决异步数据筛选的痛点

el-table 是 Vue.js 中一款广泛应用的表格组件，以其强大的功能和可定制性而著称。然而，在处理异步数据筛选时，el-table 可能会遇到一些渲染问题，例如筛选项无法正常显示。本文将深入探讨如何使用 slot="header" 机制来解决这一难题，让您的 el-table 筛选数据更加流畅无忧。

slot="header" 的妙用

slot="header" 是 el-table 提供的一个插槽，它允许您自定义表头的显示内容。通过利用这个插槽，我们可以将异步数据筛选逻辑封装在自定义组件中，从而与 el-table 的渲染过程解耦。

自定义组件的实现

要实现自定义筛选组件，我们需要创建一个 Vue 组件，并在其中处理异步数据请求和筛选项渲染。以下是示例代码：

// AsyncFilter.vue
<template>
  <div>
    <el-select v-model="selectedValue">
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
    <el-button @click="fetchData">Fetch Data</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null,
      options: [],
      data: [],
    };
  },
  methods: {
    fetchData() {
      // 模拟异步数据请求
      setTimeout(() => {
        this.options = [
          { label: 'Option 1', value: 'value1' },
          { label: 'Option 2', value: 'value2' },
        ];
        this.data = [
          { id: 1, name: 'John' },
          { id: 2, name: 'Jane' },
        ];
      }, 1000);
    },
  },
};
</script>

集成到 el-table

现在，我们可以将自定义组件集成到 el-table 中：

<el-table :data="tableData">
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column slot="header">
    <template>
      <async-filter @fetch-data="fetchData"></async-filter>
    </template>
  </el-table-column>
</el-table>