Bootstrap-vue b-table: как установить css-класс для неактивных строк? - PullRequest
Новая
       8

Bootstrap-vue b-table: как установить css-класс для неактивных строк?

0 голосов
/ 01 июля 2018

Я использую vue2 с bootstrap-vue. На самом деле у меня есть b-таблица с некоторыми полями. Одно из полей «освобождено» с логическим значением (true / false). Я хочу, чтобы в каждой строке был класс css, где значение поля «освобожден» равно false . Например, чтобы показать другим цветом текста, что строка неактивна.

Как мне этого добиться? Я не нашел решения в документации по bootstrap-vue. У кого-нибудь есть идея? (это мой первый вопрос здесь, извините, если это трудно понять)

Пример (только строка элемента 2 должна получить класс css для строки таблицы, потому что он не освобожден): 

...
<b-table stacked="md" :items="items" :fields="fields" >
...


<script>
...

export default {
  data () {
    return {
        fields: {
            {
              key: 'id',
              label: 'ID',
              sortable: true,
              class: 'Left',
            },
            {
              key: 'name',
              label: 'Name',
              sortable: true,
              class: 'Left'
            },
            {
              key: 'released',
              label: 'Freigegeben',
              sortable: true,
              class: 'Left'
            },
        },
        items: [
            {
              id: '1',
              name: 'nameA',
              released: true,
            },
            {
              id: '2',
              name: 'nameB',
              released: false,
            },
            {
              id: '3',
              name: 'nameC',
              released: true,
            },
            {
              id: '4',
              name: 'nameD',
              released: true,
            },

        ],

    },
  }
  ...
}

1 Ответ

0 голосов
/ 26 марта 2019

Вы должны использовать computed для вычисления fields

следующий код - моя мысль ， нет подтверждения 

...
<b-table stacked="md" :items="items" :fields="fields" >
...


<script>
...

export default {
  data () {
    return {
        items: [
            {
              id: '1',
              name: 'nameA',
              released: true,
            },
            {
              id: '2',
              name: 'nameB',
              released: false,
            },
            {
              id: '3',
              name: 'nameC',
              released: true,
            },
            {
              id: '4',
              name: 'nameD',
              released: true,
            },
        ],
    },
    computed: {
        fields(){
            let emptyArr = []
                this.items.map(item => {
                let keys = Object.keys(item)
                let key = ''
                if(item.released) {
                    emptyArr.push({
                        key: keys[0],
                        label: keys[2]=== 'released' ? 'Freigegeben' : 
                        keys[0].toUpperCase(),
                        sortable: true,
                        class: 'Left'
                })} else {
                    emptyArr.push({
                        key: keys[0],
                        label: keys[2]=== 'released' ? 'Freigegeben' : 
                        keys[0].toUpperCase(),
                        sortable: true,
                        class: '' //when release is false
                })}
            })
            return emptyArr
        }
     }
  ...
}
...