如何在b-table的top-row插槽中排除最后一列的筛选功能？

当然可以实现排除最后一列不显示筛选输入框，下面提供两种实用的实现方式：

方式一：通过列索引判断排除最后一列 #

在top-row插槽中遍历列时，直接判断当前列是否为最后一列，仅对非最后一列渲染筛选输入框：

<template>
  <b-table :columns="columns" :items="items">
    <template #top-row="data">
      <tr>
        <th v-for="(column, index) in data.columns" :key="column.key">
          <!-- 仅非最后一列显示筛选输入框 -->
          <div v-if="index !== data.columns.length - 1">
            <input
              type="text"
              placeholder="筛选..."
              v-model="filters[column.key]"
              @input="handleFilter"
            />
          </div>
          <!-- 最后一列只显示列标题 -->
          <span v-else>{{ column.label }}</span>
        </th>
      </tr>
    </template>
  </b-table>
</template>

<script setup>
import { ref } from 'vue';

const columns = ref([
  { key: 'name', label: '姓名' },
  { key: 'age', label: '年龄' },
  { key: 'address', label: '地址' },
  { key: 'operation', label: '操作' } // 最后一列，不需要筛选
]);

const items = ref([/* 你的业务数据 */]);
const filters = ref({});

const handleFilter = () => {
  // 此处编写你的筛选逻辑
};
</script>

方式二：通过自定义列属性控制筛选（更灵活） #

如果后续需要调整排除的列，这种方式更易维护：给不需要筛选的列添加自定义属性（比如filterable: false），在插槽中根据该属性判断是否渲染输入框：

<template>
  <b-table :columns="columns" :items="items">
    <template #top-row="data">
      <tr>
        <th v-for="column in data.columns" :key="column.key">
          <!-- 仅标记为可筛选的列显示输入框 -->
          <div v-if="column.filterable !== false">
            <input
              type="text"
              placeholder="筛选..."
              v-model="filters[column.key]"
              @input="handleFilter"
            />
          </div>
          <span v-else>{{ column.label }}</span>
        </th>
      </tr>
    </template>
  </b-table>
</template>

<script setup>
import { ref } from 'vue';

const columns = ref([
  { key: 'name', label: '姓名', filterable: true },
  { key: 'age', label: '年龄', filterable: true },
  { key: 'address', label: '地址', filterable: true },
  { key: 'operation', label: '操作', filterable: false } // 标记为不可筛选
]);

const items = ref([/* 你的业务数据 */]);
const filters = ref({});

const handleFilter = () => {
  // 此处编写你的筛选逻辑
};
</script>

两种方式都能满足需求，方式二更适合后续需要调整筛选列范围的场景。

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