如何结合v-if实现v-data-table的自动渲染与数据筛选？

问题分析 #

你当前的实现有两个核心问题：

1. 直接在v-slot:item模板上使用v-if="!item.excluido"无法实现数据筛选——这种写法只是跳过了符合条件项的渲染，但表格的数据源还是完整的form.itens，分页、总数统计依然基于原数据，并非真正的过滤。
2. 没有启用v-data-table的内置筛选机制，也未手动处理过滤后的数据源。

解决方案 #

方案1：手动过滤数据源（适合简单的排除类需求）

通过计算属性生成过滤后的数据集，直接绑定给表格：

// 在组件的computed中添加
computed: {
  filteredItems() {
    // 过滤掉excluido为true的项，可根据需求追加其他筛选条件
    return this.form.itens.filter(item => !item.excluido);
  }
}

修改表格的items绑定，并移除插槽上无效的v-if：

<v-data-table 
  :headers="colunas" 
  :items="filteredItems" 
  :items-per-page="15" 
  class="elevation-1"
>
  <template v-slot:item.menu="{ item, index }">
    <v-icon left @click="delItem(item, 'or')" color="red">fa fa-trash-alt</v-icon>
    <v-icon right @click="edtItem(item, index)" color="orange">fa fa-pencil</v-icon>
  </template>
  <template v-slot:item.custo="{ item }">
    <span class="text-green">
      <v-icon small color="green" left>fa-solid fa-brazilian-real-sign</v-icon>
    </span>
    <span class="text-bold">{{ formVlr(item.custo) }}</span>
  </template>
  <template v-slot:item.tt_custo="{ item }">
    <span class="text-green">
      <v-icon small color="green" left>fa-solid fa-brazilian-real-sign</v-icon>
    </span>
    <span class="text-bold">{{ formVlr(item.tt_custo) }}</span>
  </template>
</v-data-table>

方案2：使用v-data-table内置筛选（支持全局搜索/列筛选）

如果需要同时支持全局搜索和排除已删除项，可结合组件的search属性和自定义筛选函数：

1. 给表头添加可筛选标记（根据实际列调整）：

// 示例表头配置，filterable设为true开启列筛选
colunas: [
  { text: '菜单', value: 'menu', filterable: false },
  { text: '成本', value: 'custo', filterable: true },
  { text: '总成本', value: 'tt_custo', filterable: true },
  // 其他列配置...
]

2. 添加搜索框并配置表格：

<!-- 全局搜索框 -->
<v-text-field 
  v-model="searchQuery" 
  label="搜索内容" 
  prepend-inner-icon="mdi-magnify"
  class="mb-4"
></v-text-field>

<v-data-table 
  :headers="colunas" 
  :items="form.itens" 
  :items-per-page="15" 
  class="elevation-1"
  :search="searchQuery"
  :custom-filter="customFilter"
>
  <!-- 插槽内容保持不变 -->
  <template v-slot:item.menu="{ item, index }">
    <v-icon left @click="delItem(item, 'or')" color="red">fa fa-trash-alt</v-icon>
    <v-icon right @click="edtItem(item, index)" color="orange">fa fa-pencil</v-icon>
  </template>
  <template v-slot:item.custo="{ item }">
    <span class="text-green">
      <v-icon small color="green" left>fa-solid fa-brazilian-real-sign</v-icon>
    </span>
    <span class="text-bold">{{ formVlr(item.custo) }}</span>
  </template>
  <template v-slot:item.tt_custo="{ item }">
    <span class="text-green">
      <v-icon small color="green" left>fa-solid fa-brazilian-real-sign</v-icon>
    </span>
    <span class="text-bold">{{ formVlr(item.tt_custo) }}</span>
  </template>
</v-data-table>

3. 定义自定义筛选函数：

// 在组件的data和methods中添加
data() {
  return {
    searchQuery: ''
  }
},
methods: {
  customFilter(value, search, item) {
    // 先排除已删除的项，再执行默认的搜索匹配逻辑
    if (item.excluido) return false;
    return value.toString().toLowerCase().includes(search.toLowerCase());
  }
}

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