Laravel Vue Query Builder使用addFilter如何修改或删除默认空选项

下面提供两种需求的实现方式，你可以根据自己的需要选择：

方式1：后端配置实现（推荐，无需修改前端代码） #

这个默认追加的空选项是组件内置的功能，你可以直接在后端调用addFilter方法时通过第四个配置参数修改：

将空选项文本改为「全部」 #

修改后端筛选配置代码：

return  Inertia::render('Speaker/List', [
    'users'=>$users,
])->table(function ($table) use ($degreeArr, $ProductArr) {
    $table->addFilter('products.id', '', $ProductArr, [
        'emptyOption' => '全部'
    ]);
});

直接删除空选项 #

将emptyOption设为false即可：

return  Inertia::render('Speaker/List', [
    'users'=>$users,
])->table(function ($table) use ($degreeArr, $ProductArr) {
    $table->addFilter('products.id', '', $ProductArr, [
        'emptyOption' => false
    ]);
});

方式2：前端实现 #

如果不方便修改后端代码，也可以直接在前端模板调整：

将空选项文本改为「全部」 #

修改option的渲染逻辑，匹配空key时替换显示文本：

<option v-for="(option, key) in filter.options" :value="key" :key="key">
  {{ key === '' ? '全部' : option }}
</option>

直接删除空选项 #

遍历选项时过滤掉空key的项即可：

<option 
  v-for="(option, key) in filter.options" 
  :value="key" 
  :key="key"
  v-if="key !== ''"
>
  {{ option }}
</option>

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