<template>
    <div>
        <a-table :columns="columns"
                 :data-source="menuPermissionData"
                 :bordered="true"
        >
            <template #bodyCell="{column, record }">
                <template v-if="column.dataIndex === 'interface' && record.interface">
                    <a-checkbox-group v-model:value="record.checkedActionList" :options="record.interface" />
                </template>
            </template>
        </a-table>
    </div>
</template>
<script setup>
    import { ref, watch } from 'vue'
    const menuPermissionData = ref([])

    /* 监听多选框改变 */
    watch(() => menuPermissionData.value, value => {
        console.log(333, value)
    }, { deep: true }) // 深度监听
</script>