用vite和element plus实现多个选择器筛选内容并用卡片形式呈现选项内容使用示例一次只呈现两张卡片多余卡片分页显示

以下是使用Vite和Element Plus实现多个选择器筛选内容并以卡片形式呈现的示例代码：

<template>
  <div class="container">
    <el-select v-model="selectedOptions.option1" placeholder="Option 1" @change="filterItems">
      <el-option v-for="option in options.option1" :key="option" :label="option" :value="option"></el-option>
    </el-select>
    <el-select v-model="selectedOptions.option2" placeholder="Option 2" @change="filterItems">
      <el-option v-for="option in options.option2" :key="option" :label="option" :value="option"></el-option>
    </el-select>

    <div class="card-container">
      <el-card v-for="(item, index) in filteredItems" :key="index" class="card" shadow="hover">
        <!-- Card content goes here -->
      </el-card>
    </div>

    <el-pagination
      v-if="totalPages > 1"
      layout="prev, pager, next"
      :total="filteredItems.length"
      :page-size="pageSize"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const options = {
      option1: ['Option 1-1', 'Option 1-2', 'Option 1-3'],
      option2: ['Option 2-1', 'Option 2-2', 'Option 2-3'],
    };

    const items = [
      { name: 'Item 1', option1: 'Option 1-1', option2: 'Option 2-1' },
      { name: 'Item 2', option1: 'Option 1-1', option2: 'Option 2-2' },
      { name: 'Item 3', option1: 'Option 1-2', option2: 'Option 2-1' },
      { name: 'Item 4', option1: 'Option 1-2', option2: 'Option 2-2' },
      { name: 'Item 5', option1: 'Option 1-3', option2: 'Option 2-3' },
    ];

    const selectedOptions = {
      option1: '',
      option2: '',
    };

    const pageSize = 2;
    const currentPage = ref(1);

    const filterItems = () => {
      currentPage.value = 1;
    };

    const changePage = (page) => {
      currentPage.value = page;
    };

    const filteredItems = ref([]);

    const totalPages = Math.ceil(filteredItems.value.length / pageSize);

    const updateFilteredItems = () => {
      const filtered = items.filter((item) =>
        (selectedOptions.option1 ? item.option1 === selectedOptions.option1 : true) &&
        (selectedOptions.option2 ? item.option2 === selectedOptions.option2 : true)
      );
      filteredItems.value = filtered.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize);
    };

    updateFilteredItems();

    return {
      options,
      selectedOptions,
      filteredItems,
      totalPages,
      pageSize,
      filterItems,
      currentPage,
      changePage,
    };
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.card {
  width: 300px;
  margin: 10px;
}
</style>

在这个示例中，我们有两个选择器Option 1和Option 2，用户可以从每个选择器中选择一个选项。所选的选项将用于筛选items数组中的卡片内容，只有满足选择器条件的卡片才会显示。

卡片内容可以根据需求进行自定义，你可以在el-card组件中添加你自己的内容。

当卡片数量超过一页的容量时，我们使用el-pagination组件进行分页。用户可以通过点击分页器来浏览所有的卡片。

请注意，这只是一个基本示例，你可以根据自己的需求进行修改和扩展。