如何从 vue js 中的 BFormSelect 或 b-form-select 中删除默认类？

Posted 2023-02-22

技术标签:

【中文标题】如何从 vue js 中的 BFormSelect 或 b-form-select 中删除默认类？【英文标题】：How to remove default class from BFormSelect or b-form-select in vue js? 【发布时间】：2020-07-07 21:22:57 【问题描述】：

我的代码如下：

<b-form-select v-model="filterDuration"
               id="initialDurationSelect"
               :options="durationOptions"
               @@change="onChange($event)"
               plain="true">
</b-form-select>

这个选择选项渲染如下：

<select id="initialDurationSelect" size="0" class="form-control">
   <option value="0">All</option>
   <option value="3">Last 3 Months</option>
   <option value="6">Last 6 Months</option>
</select>

我想从这个select 中删除class 属性，我尝试了以下选项：

将class 添加为class=""（不工作并呈现为class="form-control"）将class 添加为class="123"（不工作并呈现为class="123 form-control"）

请建议如何删除class 属性或从class 值中删除"form-control"。

【问题讨论】：

【参考方案1】：

只需使用原生 <select> 元素，然后使用 v-for 循环渲染 <option>s。

BootstrapVue 的组件旨在使用引导样式/类。要渲染非 Bootstrap 样式的元素，只需自己创建 html5 元素。

【讨论】：

【参考方案2】：

如果您不使用 bootstrap-vue（以及 Bootsrap CSS）作为 CSS 框架来样式化和调整网页上的组件，那么您根本不应该使用 bootstrap-vue。所有 bootstrap-vue 组件都使用一些类来相互保持一致，并与网页的整体设计保持一致。

【讨论】：

我使用的是b-table组件，所以无法移除bootstrap-vue，有没有办法处理bootstrap的默认类？或者，如果您只需要此更改，您可以尝试删除/调整 vue-select 的不必要的边距/填充和其他 CSS 属性。