1

版本：

Vue: 3.0.0
ag-grid-community: 26.1.0
ag-grid-vue3: 26.1.2
Chrome: 95.0.4638.54 (Official Build) (x86_64)

如何将内容集中在单个列下？

请注意，我尝试了各种解决方案；都失败了。我在下面列出代码。以下是我尝试过的案例。

尝试类似于 rightAligned 的方法。

文档描述了如何将列配置为右对齐数字。IE：

      columnDefs: [
        { headerName: "Sample ID", field: "sampleId", sortable: true, checkboxSelection: true, type: 'rightAligned' },
        .
        .
        .
      ],

leftAligned直觉上，我猜想这centerAligned会对单元格内容的水平对齐产生类似的影响。 没有。 这没有记录，显然不支持。

尝试细胞类。

然后我尝试设置一个自定义类，并尝试了适合普通收件箱内容以及弹性绑定内容的样式：

      columnDefs: [
        { headerName: "Sample ID", field: "sampleId", sortable: true, checkboxSelection: true, cellClass: 'grid-cell-centered' },
        .
        .
        .
      ],

和：

  .grid-cell-centered {
    justify-content: center;
  }

或与：

  .grid-cell-centered {
    text-align: center;
  }

没有。那也行不通。

尝试使用 ag-grid 提供的内置样式。

我使用其中一种内置样式成功地将列标题标签居中：

  .ag-header-cell-label {
    justify-content: center;
  }

为了获得内容单元格的类似行为，我然后尝试了这个：

  .ag-header-cell-text {
    justify-content: center;
  }

没有。 那也不行。

我们如何才能使整列居中？这是我的设置：

<template>
  <ag-grid-vue style="height: 500px; width: 75%;"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    rowSelection="multiple">
  </ag-grid-vue>
</template>

<script>
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";

export default {
  name: "CenterColumnContent",
  components: {
    AgGridVue,
  },
  setup() {
    return {
      columnDefs: [
        { headerName: "Sample ID", field: "sampleId", sortable: true, checkboxSelection: true, cellClass: 'grid-cell-centered' },
        .
        .
        .
      ],
      rowData: [
        { sampleId: "1" },
        .
        .
        .
      ],
    };
  },
};
</script>

<style lang="scss">
  @import "~ag-grid-community/dist/styles/ag-grid.css";
  @import "~ag-grid-community/dist/styles/ag-theme-alpine.css";

  .ag-header-cell-label {
    justify-content: center;
  }

  .grid-cell-centered {
    justify-content: center;
  }
</style>
4

0 回答 0