Vite & Element Plus: Build a Multi-Filter Card Display with Pagination

This tutorial demonstrates how to build a multi-filter card display using Vite and Element Plus. The application allows users to select options from three dropdown filters to narrow down the displayed content. The cards are presented in a grid layout with pagination to handle large datasets.

Setup

First, ensure you have Vite and Element Plus installed. Use these commands:

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

CardSelector Component

Create a new component called 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 paginatedItems' :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>

Main Component

Import the CardSelector component into your main component:

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

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

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

Run the Application

Start the Vite development server:

npm run dev

The application will now be accessible in your browser. You can filter the cards using the dropdowns and navigate between pages using the pagination controls.