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

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

<template>
  <div>
    <el-select v-model="selectedOption1" placeholder="Option 1" @change="filterItems">
      <el-option v-for="option in options1" :key="option" :label="option" :value="option"></el-option>
    </el-select>

    <el-select v-model="selectedOption2" placeholder="Option 2" @change="filterItems">
      <el-option v-for="option in options2" :key="option" :label="option" :value="option"></el-option>
    </el-select>

    <el-select v-model="selectedOption3" placeholder="Option 3" @change="filterItems">
      <el-option v-for="option in options3" :key="option" :label="option" :value="option"></el-option>
    </el-select>

    <el-row>
      <el-col v-for="item in filteredItems" :key="item.id" :span="12">
        <el-card>
          <div>{{ item.title }}</div>
          <div>{{ item.description }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination v-if="totalPages > 1" :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="totalItems" @current-change="handlePageChange"></el-pagination>
  </div>
</template>

<script>
import { reactive, computed, watch } from 'vue';
import { ElSelect, ElOption, ElRow, ElCol, ElCard, ElPagination } from 'element-plus';

export default {
  components: {
    ElSelect,
    ElOption,
    ElRow,
    ElCol,
    ElCard,
    ElPagination,
  },
  setup() {
    const options1 = ['Option 1A', 'Option 1B', 'Option 1C'];
    const options2 = ['Option 2A', 'Option 2B', 'Option 2C'];
    const options3 = ['Option 3A', 'Option 3B', 'Option 3C'];

    const items = reactive([
      { id: 1, title: 'Item 1', description: 'Description 1', option1: 'Option 1A', option2: 'Option 2A', option3: 'Option 3A' },
      { id: 2, title: 'Item 2', description: 'Description 2', option1: 'Option 1B', option2: 'Option 2A', option3: 'Option 3B' },
      { id: 3, title: 'Item 3', description: 'Description 3', option1: 'Option 1A', option2: 'Option 2B', option3: 'Option 3C' },
      { id: 4, title: 'Item 4', description: 'Description 4', option1: 'Option 1C', option2: 'Option 2B', option3: 'Option 3A' },
      { id: 5, title: 'Item 5', description: 'Description 5', option1: 'Option 1A', option2: 'Option 2C', option3: 'Option 3B' },
      { id: 6, title: 'Item 6', description: 'Description 6', option1: 'Option 1B', option2: 'Option 2C', option3: 'Option 3C' },
    
      // Add more items...
    ]);

    const selectedOption1 = reactive(null);
    const selectedOption2 = reactive(null);
    const selectedOption3 = reactive(null);

    const pageSize = 6;
    const currentPage = reactive(1);

    const filteredItems = computed(() => {
      let filtered = items;

      if (selectedOption1) {
        filtered = filtered.filter(item => item.option1 === selectedOption1);
      }
      if (selectedOption2) {
        filtered = filtered.filter(item => item.option2 === selectedOption2);
      }
      if (selectedOption3) {
        filtered = filtered.filter(item => item.option3 === selectedOption3);
      }

      const startIndex = (currentPage - 1) * pageSize;
      const endIndex = startIndex + pageSize;

      return filtered.slice(startIndex, endIndex);
    });

    const totalItems = computed(() => {
      let filtered = items;

      if (selectedOption1) {
        filtered = filtered.filter(item => item.option1 === selectedOption1);
      }
      if (selectedOption2) {
        filtered = filtered.filter(item => item.option2 === selectedOption2);
      }
      if (selectedOption3) {
        filtered = filtered.filter(item => item.option3 === selectedOption3);
      }

      return filtered.length;
    });

    const totalPages = computed(() => Math.ceil(totalItems.value / pageSize));

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

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

    watch([selectedOption1, selectedOption2, selectedOption3], () => {
      currentPage.value = 1;
    });

    return {
      options1,
      options2,
      options3,
      selectedOption1,
      selectedOption2,
      selectedOption3,
      filteredItems,
      currentPage,
      pageSize,
      totalItems,
      totalPages,
      filterItems,
      handlePageChange,
    };
  },
};
</script>

在上述代码中，我们使用Vue 3的Composition API来编写组件逻辑。我们使用reactive函数将selectedOption1，selectedOption2和selectedOption3转换为响应式对象，以便与<el-select>进行双向绑定。我们还使用computed属性来计算filteredItems，totalItems和totalPages，以便根据选择器的值进行筛选和分页。

<el-select>用于创建选择器，<el-option>用于渲染选项内容。通过监听选择器的change事件，我们调用filterItems方法来重新筛选内容。

使用<el-row>和<el-col>来以网格形式排列卡片，每行显示两张卡片。我们使用<el-card>来呈现每个项目的标题和描述。

如果有多页内容，我们使用<el-pagination>来实现分页，监听current-change事件以处理页码变化。

这是一个基本的示例，你可以根据你的需求进行扩展和美化。请确保在项目中正确引入Vite和Element Plus，并按照需要调整示例代码。