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

首先，需要安装Vite和Element Plus。可以使用以下命令进行安装：

npm install -g create-vite
create-vite my-app
cd my-app
npm install element-plus

接下来，创建一个新的组件，名为CardSelector.vue：

<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">
        <el-card :header="item.title" :body-style="{ padding: '10px' }">
          <p>{{ item.description }}</p>
        </el-card>
      </el-col>
    </el-row>

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

<script>
export default {
  data() {
    return {
      options1: ['Option 1-1', 'Option 1-2', 'Option 1-3'],
      options2: ['Option 2-1', 'Option 2-2', 'Option 2-3'],
      options3: ['Option 3-1', 'Option 3-2', 'Option 3-3'],
      selectedOption1: '',
      selectedOption2: '',
      selectedOption3: '',
      items: [
        { id: 1, title: 'Card 1', description: 'Description for Card 1', option1: 'Option 1-1', option2: 'Option 2-1', option3: 'Option 3-1' },
        { id: 2, title: 'Card 2', description: 'Description for Card 2', option1: 'Option 1-1', option2: 'Option 2-2', option3: 'Option 3-1' },
        { id: 3, title: 'Card 3', description: 'Description for Card 3', option1: 'Option 1-2', option2: 'Option 2-1', option3: 'Option 3-2' },
        { id: 4, title: 'Card 4', description: 'Description for Card 4', option1: 'Option 1-2', option2: 'Option 2-2', option3: 'Option 3-2' },
        { id: 5, title: 'Card 5', description: 'Description for Card 5', option1: 'Option 1-3', option2: 'Option 2-3', option3: 'Option 3-3' },
        { id: 6, title: 'Card 6', description: 'Description for Card 6', option1: 'Option 1-3', option2: 'Option 2-3', option3: 'Option 3-3' },
        { id: 7, title: 'Card 7', description: 'Description for Card 7', option1: 'Option 1-1', option2: 'Option 2-2', option3: 'Option 3-3' },
        { id: 8, title: 'Card 8', description: 'Description for Card 8', option1: 'Option 1-2', option2: 'Option 2-1', option3: 'Option 3-1' },
        { id: 9, title: 'Card 9', description: 'Description for Card 9', option1: 'Option 1-3', option2: 'Option 2-2', option3: 'Option 3-2' },
        { id: 10, title: 'Card 10', description: 'Description for Card 10', option1: 'Option 1-1', option2: 'Option 2-3', option3: 'Option 3-3' },
        { id: 11, title: 'Card 11', description: 'Description for Card 11', option1: 'Option 1-1', option2: 'Option 2-1', option3: 'Option 3-1' },
        { id: 12, title: 'Card 12', description: 'Description for Card 12', option1: 'Option 1-2', option2: 'Option 2-2', option3: 'Option 3-2' },
        { id: 13, title: 'Card 13', description: 'Description for Card 13', option1: 'Option 1-3', option2: 'Option 2-3', option3: 'Option 3-3' },
        { id: 14, title: 'Card 14', description: 'Description for Card 14', option1: 'Option 1-1', option2: 'Option 2-2', option3: 'Option 3-3' },
        { id: 15, title: 'Card 15', description: 'Description for Card 15', option1: 'Option 1-2', option2: 'Option 2-1', option3: 'Option 3-1' },
        { id: 16, title: 'Card 16', description: 'Description for Card 16', option1: 'Option 1-3', option2: 'Option 2-2', option3: 'Option 3-2' },
        { id: 17, title: 'Card 17', description: 'Description for Card 17', option1: 'Option 1-1', option2: 'Option 2-3', option3: 'Option 3-3' },
        { id: 18, title: 'Card 18', description: 'Description for Card 18', option1: 'Option 1-2', option2: 'Option 2-1', option3: 'Option 3-1' },
        { id: 19, title: 'Card 19', description: 'Description for Card 19', option1: 'Option 1-3', option2: 'Option 2-2', option3: 'Option 3-2' },
        { id: 20, title: 'Card 20', description: 'Description for Card 20', option1: 'Option 1-1', option2: 'Option 2-3', option3: 'Option 3-3' },
      ],
      filteredItems: [],
      currentPage: 1,
    };
  },
  mounted() {
    this.filterItems();
  },
  methods: {
    filterItems() {
      this.filteredItems = this.items.filter((item) =>
        this.selectedOption1 ? item.option1 === this.selectedOption1 : true
      ).filter((item) =>
        this.selectedOption2 ? item.option2 === this.selectedOption2 : true
      ).filter((item) =>
        this.selectedOption3 ? item.option3 === this.selectedOption3 : true
      );
      this.currentPage = 1;
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
    },
  },
  computed: {
    paginatedItems() {
      const startIndex = (this.currentPage - 1) * 6;
      const endIndex = startIndex + 6;
      return this.filteredItems.slice(startIndex, endIndex);
    },
  },
};
</script>

在主组件中，导入CardSelector组件并使用它：

<template>
  <div>
    <h1>Card Selector</h1>
    <CardSelector />
  </div>
</template>

<script>
import CardSelector from './CardSelector.vue';

export default {
  components: {
    CardSelector,
  },
};
</script>

最后，将主组件渲染到页面中：

<template>
  <div>
    <h1>Card Selector</h1>
    <CardSelector />
  </div>
</template>

<script>
import CardSelector from './CardSelector.vue';

export default {
  components: {
    CardSelector,
  },
};
</script>

现在，运行Vite开发服务器，查看结果：

npm run dev

这样，就可以使用Vite和Element Plus实现三个选择器筛选内容，并以卡片形式呈现，每页最多显示6张卡片，一行两张，多余的卡片会分页显示。