0

版本：

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，我已经指定checkboxSelection: true了该Pending列。我不希望在该列中呈现任何文本。相反，我希望在每个单元格中都有一个复选框。这可以做到吗？按照现在的情况，复选框在单元格中是左对齐的。

这是 columnDef 的Pending：

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

这是列标题的样式：

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

感谢您调查它。

在此处输入图像描述

4

1 回答 1

0

我草拟了一个通用解决方案，它解释了如何在网格单元格中呈现自定义 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>
于 2021-11-21T16:05:13.747 回答