SOURCE

var Main = {
    setup() {
        const gridRef = Vue.ref(null)
        const gridOptions = Vue.reactive({
            border: true,
                editConfig:{trigger: 'click', mode: 'cell'},
                sortConfig: {
                    remote: true
                },
                onSortChange: ({ column, property, order, sortBy, sortList, $event }) => {
                    console.log('触发排序刷新数据',{ column, property, order, sortBy, sortList, $event })
                // unref(column).order = order
                // gridRef.value.sort({ field: 'name', order: 'asc' })
                },
                columns: [
                    {type: 'radio', width: 60},
                    {field: 'name',title: 'Name',sortable:true, editRender:{name: 'ElInput'}},
                    {field: 'sex',title: 'Sex', editRender:{name: 'input'}},
                    {field: 'date',title: 'Date', editRender:{name: '$input', props: {type: 'date'}}},
                    //Address列，这一列是自定义模板，需要根据行数据的某个字段去渲染不同的编辑模板
                    {field: 'address',title: 'Address', editRender: { autofocus: '.vxe-input--inner' },
                    //我需要使用vxe-grid实现不同行展示不同的编辑框
                    slots:{ edit :({row},h)=> { return this.setEditType(row)} },
                    // slots:{ edit:'input'}
                    }
                ],
                rowId: 'id',
                radioConfig: {
                    reserve: true,
                    highlight: true
                },
                 formConfig: {
                    data: {
                    name: 'condition',
                    },
                    items: [
                    { span: 14,field: 'condition', title: '查询条件', itemRender: { name: '$input', props: { placeholder: '编号 姓名 手机号码' } } },
                    { span: 10, align: 'right', itemRender: { name: '$buttons', children: [{
                        props: { type: 'submit', content: '查询', status: 'primary' }
                        }, {
                        events: {click: onTest},
                        props: { status: 'warning', content: '查看选择'}}
                        ]}}
                    ]
                }
        })

        function getData () {
             // gridRef.value.clearRadioRow()
             gridRef.value.reloadData([{
                    name: 'aa',
                    id: '11'
                }, {
                    name: 'bb',
                    id: '22'
                }])
        }

        function onTest () {
            console.log('尝试拿到选中的数据:',
                         gridRef.value.getRadioRecord(),
                         gridRef.value.getRadioReserveRecord(true))
        }

        const gridEvents = {
            formSubmit () {
                console.log('载入数据')
                getData()
            }
        }

        return {
            gridOptions,onTest,gridRef,gridEvents
        }
    }
};

Vue.createApp(Main).use(VXETable).mount('#app')
/**
 * 问题描述：
 *  点击 查询 按钮 动态载入数据后， 点击 查看选择，getRadioRecord 或者 getRadioReserveRecord 方法 都无法返回选中的 radio
 */

<script src="https://cdn.jsdelivr.net/npm/vue@next">
</script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils">
</script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@next">
</script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
	<div>
      <vxe-grid ref="gridRef" v-on="gridEvents" v-bind="gridOptions"/>
	</div>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css");