Vue.js：如何修改 BootstrapVue 表中选定变量的颜色？

Posted 2023-03-06

【中文标题】Vue.js：如何修改 BootstrapVue 表中选定变量的颜色？

【英文标题】：Vue.js : How to modify color of selected-variant in table of BootstrapVue?

【发布时间】：2020-01-31 07:46:16

【问题描述】：

我正在使用 bootstrap-vue 表格行选择支持。我想修改 b-table 的 selected-variant 道具的颜色。在代码中，info 是表格中选定行的选定变体颜色。我想自定义它并使其颜色 #91c27d。

下面是代码和截图。

这是表格的html代码：

    <b-table 
       sticky-header="450px" 
       striped 
       hover 
       :items="items" 
       :fields="fields"
       ref="selectableTable"
       selectable
       :select-mode="selectMode"
       selected-variant="info"
       @row-selected="onRowSelected">   
    </b-table>

这是整个脚本：

    import axios from 'axios';
    export default 
       name: "Canvassing",
       data() 
          return 
             fields: [
                 key: 'userId', label: 'User ID', thStyle: background: '#0074a5', color: '#ffffff' , 
                 key: 'id', label: 'ID', thStyle: background: '#0074a5', color: '#ffffff' ,
                 key: 'title', label: 'Title', thStyle: background: '#0074a5', color: '#ffffff' ,
                 key: 'completed', label: 'Completed', thStyle: background: '#0074a5', color: '#ffffff' 
              ],
              items: []
           
        ,
        created() 
           axios 
            .get('https://jsonplaceholder.typicode.com/todos')
            .then(res => this.items = res.data)
            .catch(e => 
               this.errors.push(e)
             );
        ,
        methods: 
           onRowSelected(items) 
              this.selected = items
           
        
    

这是输出的截图：

【参考方案1】：

Ypu 需要创建一个使用您的值的新变体名称。基本上你需要在 Bootstrap 的 SCSS 他们颜色表中添加一个新的主题颜色：https://bootstrap-vue.js.org/docs/reference/theming/ 和 https://bootstrap-vue.js.org/docs/reference/color-variants/

或者，将所选变量设置为 ""（空字符串），并使用自定义 CSS 定位 .table > tbody > tr.b-row-selected 定位所选行

<style scoped>
/deep/ .table > tbody > tr.b-table-row-selected,
/deep/ .table > tbody > tr.b-table-row-selected > td,
/deep/ .table > tbody > tr.b-table-row-selected > th 
  background-color: #91c27d;

</style>