DevExtreme DataGrid check box 정렬 (vue.js)

개발환경

vue.js 3.2.13

 

DevExtreme DataGrid check box

그리드에서 row 선택 체크박스

 

 

 

 

 

전체 코드 

<template>

    <div>

        <DxDataGrid

            :data-source="dataList"

            :show-borders="false"

            key-expr="seq"

            @selection-changed="onSelectionChanged"

            ref="grid"

            >

            <DxLoadPanel :enabled="true" />

            <DxScrolling mode="infinite"/>

            <DxColumn data-field="seq" caption="순번" alignment="right" :allow-sorting="false" :width="200" />

            <DxColumn data-field="item" caption="아이템" alignment="right" :allow-sorting="false" :width="200"/>

            <DxColumn data-field="name" caption="이름" alignment="right" :allow-sorting="false" :width="200" />

            <DxSelection

                select-all-mode="page"

                show-check-boxes-mode="always"

                mode="multiple"

            />

        </DxDataGrid>

          <DxButton

                text="값 체크"

                styling-mode="contained"

                type="success"

                style="width:100"

                @click="onSelectCheck" />

    </div>

</template>

<script>

    import {

        DxDataGrid,

        DxColumn,

        DxSelection

    } from 'devextreme-vue/data-grid'

    import { DxButton } from "devextreme-vue/button"

    export default {

        name: 'DataGrid02'

        , data() {

            return {

                dataList: undefined

                , selectedRowKeys : ''

            }

        }

        , components: {

            DxDataGrid

            , DxColumn

            , DxSelection

            , DxButton

        }

        , mounted() {

            this.init()

        }

        , methods: {

            init(){

                //데이터 주석처리시 '데이터 없습니다.'표시

                this.dataList = [

                                    {seq:1, item:"test1", name:"name 1"},

                                    {seq:2, item:"test2", name:"name 2"},

                                    {seq:3, item:"test3", name:"name 3"},

                                    {seq:5, item:"test4", name:"name 4"},

                                    {seq:6, item:"test5", name:"name 5"}

                                ]

            }

            , onSelectionChanged(e)//{ selectedRowKeys, selectedRowsData }

            {

                this.selectedRowKeys = e.selectedRowKeys

                console.log(this.selectedRowKeys)

                //alert(this.selectedRowKeys)

            }

            , onSelectCheck()

            {

                alert(this.selectedRowKeys)

            }

        }

    }

</script>

<style scoped>

</style>

 

 

설명은 생략