Bootstrap Vue: пользовательский стиль столбца границы и пользовательский стиль строки границы в b-таблице - PullRequest
Новая
       18

Bootstrap Vue: пользовательский стиль столбца границы и пользовательский стиль строки границы в b-таблице

0 голосов
/ 29 апреля 2020

Я хочу иметь следующее поведение:

  1. Граница в середине таблицы, которая разделяет таблицу на две части
  2. Я хочу "сгруппировать" строку по элементу, что означает, что я хочу видимое разделение при изменении элемента

Для 1 , нет проблем 

<b-table :fields="fields"
           :items="incoherences"
           :tbody-tr-class="rowClass"
  ></b-table>

    // (computed property)
    get fields() {
      if (this.incoherences.length === 0) return null
      const fields = Object.keys(this.incoherences[0])
      return fields.map(field => {
        if (field === 'devis2') {
          return {
            key: field,
            tdClass: 'with-left-border',
            thClass: 'with-left-border',
          }
        } else {
          return field
        }
      })
    }

Мы не очень хорошо видно, но между столбцами Date Fin1 и Devis2 есть вертикальная граница. Существует также граница между каждым рядом. enter image description here

На изображении я хочу иметь рамку в нижнем элементе 14 (чтобы сгруппировать их вместе), а затем сгруппировать 15, 16, 17, .. . один. Поэтому я сделал этот код 

    lastItemIdBrowser = 0
    // (method)
    rowClass(item: Incoherence, type: any) {
      let ret = false
      if (!item || type !== 'row') return
      if (item.item1 !== this.lastItemIdBrowser && this.lastItemIdBrowser !== 0) ret = true
      this.lastItemIdBrowser = item.item1
      if (ret) return 'with-top-border'
    }

Но он не имеет никакого эффекта. Чтобы увидеть желаемый эффект, я должен дать столу опору без полей , но затем я потерял все остальные свои границы: 

<b-table :fields="fields"
           :items="incoherences"
           :tbody-tr-class="rowClass"
           borderless
  ></b-table>

enter image description here

Кто-нибудь знает, как объединить эти функции, не теряя при этом другую?

1 Ответ

1 голос
/ 29 апреля 2020

Проблема, с которой вы сталкиваетесь, заключается в том, что видимая граница на самом деле применяется не к tr, а к td в таблице.

Так что вам нужно отредактировать свой CSS вместо цели td внутри строк. 

.with-top-border > td {
  border-top: 2px solid black !important;
}


new Vue({
  el: '#app',
  data() {
    return {
      fields: [
        'age',
        'first_name',
        'last_name',
        { key: 'active', tdClass: 'border border-primary' }
      ],
      items: [
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', active: false },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw', active: false },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson', active: true },
        { age: 38, first_name: 'Jami', last_name: 'Carney', active: false },
        { age: 40, first_name: 'Dickerson', last_name: 'Macdonald', active: true },
        { age: 21, first_name: 'Larsen', last_name: 'Shaw', active: true },
        { age: 89, first_name: 'Geneva', last_name: 'Wilson', active: true },
        { age: 38, first_name: 'Jami', last_name: 'Carney', active: false }
      ]
    }
  },
  methods: {
    setTbodyTrClass(item) {
      const classes = [];
      if(item.active) classes.push('custom-border');
      return classes;
    }
  }
  })
.custom-border > td {
  border-top: 3px solid green !important;
}
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.13.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table :items="items" :tbody-tr-class="setTbodyTrClass"></b-table>
</div>
...