将表格单元内部的按钮移动到中心

Question

我在表格单元格内有一个按钮。表是这样的：

      <b-table
        v-if="rows.length"
        :thead-tr-class="'bug-report-thead'"
        :tbody-tr-class="'bug-report-tbody'"
        :items="rows"
        :fields="columnsToDisplay"
        :sort-compare="sortTableByKey"
        :striped="true"
        :bordered="true"
        :outlined="true"
        :hover="true"
        :no-sort-reset="true"
        :show-empty="true"
        :filter="filter"
        @filtered="onFiltered"
        :empty-text="emptyText"
        :sort-desc="true"
        :caption-top="true"
        responsive>
/b-table>

按钮就是这样，

<template slot="iinstances" slot-scope="row">
  <div v-if=" total_rows>0 && row.item.imProdInstDet!=''">  
    <b-button style="text-align: center" :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1"> 
      More Details
    </b-button>
  </div>
</template>

如何将以上按钮移到单元格的中央？我已经尝试过margin:auto; display:block;，如下所示：how to center the button inside a table cell但这似乎不起作用。

Answer 1

字段对象中有一个属性，用于按列划分自定义样式和类。

尝试类似的事情：

<template>
  <div id="app">
    <b-table striped hover :items="items" :fields="fields">
      <template v-slot:cell(button)="data">
        <b-button>test</b-button>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    fields: ['id', 'name', { key: 'button', class: 'text-center' }],
    items: [
      { id: 1, name: 'Row 1' },
      { id: 2, name: 'Row 2' },
      { id: 3, name: 'Row 3' },
      { id: 4, name: 'Row 4' },
      { id: 5, name: 'Row 5' },
    ],
  }),
};
</script>