SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
    data() {
        return {
            tableData: [
                {
                    id: 1005,
                    name: 'Test2',
                    type: 'mp4',
                    size: null,
                    date: '2021-04-01',
                    children: [
                        {
                            id: 10053,
                            name: 'vxe-table 从入门到放弃96',
                            type: 'avi',
                            size: null,
                            date: '2021-04-01',
                        },
                        {
                            id: 10053,
                            name: 'vxe-table 从入门到放弃96',
                            type: 'avi',
                            size: null,
                            date: '2021-04-01',
                        },
                        {
                            id: 10053,
                            name: 'vxe-table 从入门到放弃96',
                            type: 'avi',
                            size: null,
                            date: '2021-04-01',
                        },
                        {
                            id: 10053,
                            name: 'vxe-table 从入门到放弃96',
                            type: 'avi',
                            size: null,
                            date: '2021-04-01',
                        },
                    ]
                }
            ]
        }
    }
};

Vue.createApp(Main).use(VXETable).mount('#app')
/**
 * 问题描述:
 *  使用树结构表格之后,根节点下只剩一个子节点时,选中子节点就会默认全部选中(选中子节点及根节点)。
 */
<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-table resizable  :tree-config="{children: 'children'}" :data="tableData" :checkbox-config="{labelField: 'id', highlight: true,checkStrictly:true}"
		 @checkbox-change="selectChangeEvent">
			<vxe-column type="checkbox" title="ID" width="280" tree-node></vxe-column>
			<vxe-column field="name" title="Name"></vxe-column>
			<vxe-column field="size" title="Size"></vxe-column>
			<vxe-column field="type" title="Type"></vxe-column>
			<vxe-column field="date" title="Date"></vxe-column>
		</vxe-table>
	</div>
</div>
@import url("https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css");