[Vue.js - Study] Ag-Grid-Vue : CheckBox

Ag-Grid-Vue 참조 : https://ag-grid.com/vue-data-grid/row-selection/#checkbox-selection

:is-row-selectable="isRowSelectable" 이라는 옵션을 바인딩한다.

기존의 ag-grid-vue 컴포넌트

<ag-grid-vue
	style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    :grid-options="gridOptions"
    pagination="true"
    row-height="75"
    row-selection="multiple"
    suppress-pagination-panel="true"
    suppress-row-click-selection="true"
    suppress-row-transform="true"
    :column-defs="columnDefs"
    :pagination-page-size="viewLimitCount"
    :is-row-selectable="isRowSelectable"
    @grid-ready="gridReady"
    @sort-changed="gridSortChanged"
    @row-clicked="onRowClicked"
/>

showDisabledCheckboxes: true 값을 넣어준다.

const isRowSelectable: Ref = ref(null);

{
	cellClass: 'rowCellChk',
    checkboxSelection: true,
    filter: false,
    headerCheckboxSelection: true,
    maxWidth: 50,
    sortable: false,
    showDisabledCheckboxes: true,
},
                
	onBeforeMount(() => {
    	Object.assign(gridOptions, {
        	defaultColDef: {
            	sortable: true,
                resizable: true,
                autoHeight: true,
                suppressMovable: true,
			},
            localeText: {noRowsToShow: '<p>등록된 게시물이 없습니다.</p><p>게시물을 등록해 주세요.</p>'},
	});
    isRowSelectable.value = (params: any) => {
    	return params.data.aprvYn === 'N';
	};
});

onBeforeMount에서 isRowSelectable.value를 만들고 params 를 받아오고 해당 데이터의 조건을 달아준다.

CSS

.ag-disabled input{
	background: #666 !important;
	opacity: 1;
}

---

결과

aprvYn의 값이 Y 인 것은 체크박스가 비활성화 되어있다.

---