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>”文本？
默认情况下，bootstrap 为 和 元素设置vertical-align: top。

谢谢

Answer 1

您可以使用字段定义tdClass中的属性将类应用于呈现的 TD 。您可以使用它来应用实用程序类，以使文本在列中居中。align-middle

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