Vue.js, bootstrap-vue, <b-table> 元素垂直对齐

Question

您好，我想在 vue/bootstrap 项目中的 b-table 中垂直对齐元素。

我的代码：

<template>
  .....
  <b-table small :fields="fields" :items="items" responsive="sm">
    <template #cell(name)="data">
      <b class="text-dark">{{ data.value }}</b>
    </template>

    <template #cell(utility)="data">
      <b class="text-dark">{{ data.value }}</b>
    </template>

    <template #cell(icon)="data">
      <img v-bind:src="data.value" alt="...." width="50" height="50">
    </template>
  </b-table>
  .....
</template>

<script>
......
  data () {
    return {
      fields: ['name', 'utility', 'icon'],
      items: [
        { name: '.....', utility: '.....', icon: '/img/......a6c26916.png' },
        { name: '.....', utility: '.....', icon: '/img/......5233a552.png' },
        { name: '.....', utility: '.....', icon: '/img/......96e5850d.png' },
        { name: '.....', utility: '.....', icon: '/img/......41bab77c.png'}
      ]
    }
  }
......
</script>

如何垂直对齐“<b>...</b>”文本？
我在页面上按 F12，默认情况下 boostrap 为 th 和 td 元素设置 vertical-align: top。
我已经尝试设置内联和 <style> vertical-align: middle 但它没有用。
我该如何更改它？
谢谢

Answer 1

您可以使用 field definitions. You can use this to apply the align-middle utility class 中的 tdClass 属性将类应用到呈现的 TD，以使您的文本在列中居中。

fields: [
  { key: 'name', tdClass: 'align-middle' }, 
  { key: 'utility', tdClass: 'align-middle' },
  'icon'
]

Vue.js, bootstrap-vue, <b-table> 元素垂直对齐

Vue.js, bootstrap-vue, <b-table> element vertical align

html-table

vue.js

bootstrap-vue