AG Grid：仅在单元格中居中复选框答案

【问题标题】：AG Grid: center checkbox alone in cellAG Grid：仅在单元格中居中复选框
【发布时间】：2021-12-29 19:49:46
【问题描述】：

版本：

vueJS: 3.0.0
bootstrap: 5.0.0-beta3
ag-grid-community: 26.1.0
ag-grid-vue3: 26.1.2

请看下面的截图。在我的columnDefs for ag-grid 中，我为Pending 列指定了checkboxSelection: true。我不希望在该列中呈现任何文本。相反，我希望在每个单元格中都有一个复选框。这可以做到吗？按照现在的情况，复选框在单元格中是左对齐的。

这是Pending 的 columnDef：

{ headerName: "Pending", field: "pending", sortable: true, editable: true, checkboxSelection: true, cellStyle: () => getPageStatus() },

这是列标题的样式：

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

感谢您的调查。

【问题讨论】：

在检查 DOM 中包含复选框的 ag-grid 单元格后，我能够使用以下样式将复选框居中在 Pending 列标题下：.ag-cell-wrapper { justify-content: center; }。但我真的希望在 AG Grid 的文档 API 中找到一种定义明确的方法。

标签： ag-grid vuejs3 ag-grid-vue

【解决方案1】：

我草拟了一个通用解决方案，它解释了如何在网格单元格中呈现自定义 HTML 元素。该解决方案的大部分基于现有的文章和博客。请注意这里的数据模型（呈现到网格）假定一个 pending 属性。

    <ag-grid-vue
      class="ag-theme-alpine"
      :frameworkComponents="frameworkComponents"
      :columnDefs="columnDefs"
      :rowData="getRowData"
      rowSelection="multiple"
      domLayout="autoHeight"
      editType="fullRow"
      @grid-ready="onGridReady">
    </ag-grid-vue>

import CheckboxRenderer from '@/components/CheckboxRenderer.vue';

export default {
  data() {
    return {
      frameworkComponents: {
        checkboxRenderer: CheckboxRenderer
      },
      columnDefs: [
            { headerName: "Pending", field: "pending", sortable: true, editable: true,
          cellStyle: () => getPageStatus(), cellRenderer: 'checkboxRenderer', valueGetter: params => params ? null : null },
      ]
    }
  }
};

CheckboxRenderer.vue

<template>
  <input ref="eGui" @click="checkedHandler" type="checkbox" v-model="params.data.pending" class="ag-input-field-input ag-checkbox-input" />
</template>

<script>
export default {
  name: "CheckboxRenderer",
  props: {
    params: Object
  },
  methods: {
    getGui() {
      return this.$refs.eGui;
    },
    checkedHandler(e) {
      let checked = e.target.checked;
      let colId = this.params.column.colId;
      this.params.node.setDataValue(colId, checked);
    }
  },
};
</script>

<style>
.ag-checkbox-input {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
</style>

【讨论】：