Vue.js: Как изменить цвет выбранного варианта в таблице BootstrapVue? - PullRequest
Новая
       59

Vue.js: Как изменить цвет выбранного варианта в таблице BootstrapVue?

0 голосов
/ 02 октября 2019

Я использую поддержка выбора строки таблицы начальной загрузки . Я хочу изменить цвет выбранного варианта опоры b-таблицы. В коде 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
           }
        }
    }

Это скриншот вывода: This is the screenshot of output

1 Ответ

1 голос
/ 02 октября 2019

Ypu нужно создать новое имя варианта, которое использует ваше значение. По сути, вам нужно добавить новый цвет темы в таблицу цветов SCSS Bootstrap: https://bootstrap -vue.js.org / docs / reference / theming / и https://bootstrap -vue.js. org / docs / reference / color-Варианты /

ИЛИ, установите выбранный вариант на "" (пустая строка) и нацеливайте выбранную строку с помощью пользовательского 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>
...