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>
<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");