Vue Element表格条件渲染：如何按is_active属性筛选显示行

Hey there! Let's figure out how to filter your Element UI table to only show rows that match your desired conditions—like is_active being 0 or 1. Here are a few solid, Vue-native approaches you can use:

1. Use a Computed Property (Recommended for Dynamic Filtering) #

Computed properties are perfect here because they cache results automatically, keeping your table performant even as data changes. You'll create a filtered version of your someData array and bind that to the table instead.

<template>
  <el-table :data="filteredData">
    <el-table-column prop="id" label="№"></el-table-column>
    <el-table-column prop="is_active" label="Active"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      someData: [] // Stores raw data from axios
    };
  },
  computed: {
    filteredData() {
      // Filter to show only rows where is_active is 0 or 1
      return this.someData.filter(item => [0, 1].includes(item.is_active));
      
      // For custom conditions, adjust the filter logic:
      // Example: Only show inactive rows (is_active = 0)
      // return this.someData.filter(item => item.is_active === 0);
    }
  },
  mounted() {
    // Simulate axios data fetch (replace with your actual request)
    this.someData = [
      { "id":1, "is_active":0 },
      { "id":2, "is_active":1 },
      { "id":3, "is_active":1 }
    ];
  }
};
</script>

2. Filter Data Immediately After Fetching #

If your filter condition is fixed (you won't need to toggle it later), you can filter the data right when you get it from axios. This avoids extra computed property overhead.

// Inside your axios request handler
axios.get('/your-api-endpoint')
  .then(response => {
    // Apply filter before assigning to someData
    this.someData = response.data.filter(item => [0, 1].includes(item.is_active));
  })
  .catch(error => {
    console.error('Failed to fetch data:', error);
  });

3. Use Element UI's Built-in Table Filtering (For User-Controlled Filtering) #

If you want users to manually switch filter conditions (e.g., toggle between active/inactive rows), use Element's built-in table filtering features. Here's an example with a dropdown selector:

<template>
  <div class="table-filter-container">
    <!-- Dropdown to select filter -->
    <el-select 
      v-model="activeFilter" 
      placeholder="Filter by Status"
      style="margin-bottom: 1rem;"
    >
      <el-option label="All Rows" value=""></el-option>
      <el-option label="Active (1)" value="1"></el-option>
      <el-option label="Inactive (0)" value="0"></el-option>
    </el-select>

    <el-table :data="someData">
      <el-table-column prop="id" label="№"></el-table-column>
      <el-table-column 
        prop="is_active" 
        label="Active"
        :filter-method="filterByActiveStatus"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someData: [],
      activeFilter: '' // Tracks user's selected filter
    };
  },
  methods: {
    filterByActiveStatus(value, row) {
      // Show all rows if no filter is selected
      if (!this.activeFilter) return true;
      // Match row's is_active to selected filter (parse to number since select returns string)
      return row.is_active === parseInt(this.activeFilter);
    }
  },
  mounted() {
    this.someData = [
      { "id":1, "is_active":0 },
      { "id":2, "is_active":1 },
      { "id":3, "is_active":1 }
    ];
  }
};
</script>

Which Approach to Choose? #

• Computed Property: Best for dynamic conditions (e.g., if you need to change the filter based on user input or other reactive data).
• Post-Fetch Filtering: Ideal for fixed, one-time filtering when data loads.
• Built-in Element Filter: Perfect for adding user-controlled filtering UI.

内容的提问来源于stack exchange，提问作者Roman Khegay