Блог

Я использую динамическую b-таблицу. хотите выровнять по правому краю, если столбец числовой, иначе выровняйте по левому краю . Не могли бы вы, пожалуйста, помочь мне достичь этого ?

Если вы можете указать, в каком столбце будут храниться числовые значения, вы можете привязать класс ко всему столбцу в полях ваших данных:

   data() {
    return {
      fields: [
        { key: "first", label: "Full Name", class: "left" },
        { key: "last", label: "Last Name", class: "left" },
        { key: "age", label: "Age", class: "right" }
      ],
      items: [
        { first: "John", last: "Doe", age: 42 },
        { first: "Jane", last: "Doe", age: 36 },
        { first: "Rubin", last: "Kincade", age: 73 }
      ]
    };
  }
 

Если вы не можете определить, в каком столбце будут содержаться числовые данные, в соответствии с этим документом вы можете попробовать привязать класс на основе значения ячейки:

     <b-table fixed responsive :items="items" :fields="fields">
      <template #cell()="data">
        <span :class="{ right: typeof data.value == 'number', left: typeof data.value != 'number' }">
          {{ data.value }} </span>
      </template>
    </b-table>
 

Но тогда вам нужно настроить отображение на гибкое и использовать выравнивание содержимого для установки положения в ячейке (выравнивание по тексту не будет работать), например:

 .right {
  display: flex;
  justify-content: right;
}
.left {
  display: flex;
  justify-content: left;
}
 

Надеюсь, я помог. Приятного кодирования.