AG Grid：单元格中单独的中心复选框

Question

版本：

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

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

这是 Pending 的 columnDef:

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

下面是 headers 列的样式：

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

感谢您的关注。

Answer 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>

AG Grid：单元格中单独的中心复选框

AG Grid: center checkbox alone in cell

ag-grid

vuejs3

ag-grid-vue

<模板>

<脚本>

CheckboxRenderer.vue