只贴实现代码,不管逻辑
Element UI、Ant-design-vue 都可以用
treeData测试数据
const gData = [
{
id: 'cl1768',
parentId: 'cl1767',
type: 'folder',
themeId: null,
themeName: null,
name: '一级',
children: [
{
id: 'cl1845',
parentId: 'cl1768',
type: 'theme',
themeId: 't898',
themeName: null,
name: '一级测试数据-1',
children: [],
},
{
id: 'cl1850',
parentId: 'cl1768',
type: 'theme',
themeId: 't959',
themeName: null,
name: '一级测试数据-2',
children: [],
},
],
},
{
id: 'cl1774',
parentId: 'cl1767',
type: 'folder',
themeId: '',
themeName: null,
name: '二级',
children: [
{
id: 'cl1775',
parentId: 'cl1774',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-1',
children: [
{
id: 'cl1840',
parentId: 'cl1775',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-1-1',
children: [
{
id: 'cl1842',
parentId: 'cl1840',
type: 'theme',
themeId: 't901',
themeName: null,
name: '二级测试数据-1-1-1',
children: [],
},
{
id: 'cl1843',
parentId: 'cl1840',
type: 'theme',
themeId: 't902',
themeName: null,
name: '二级测试数据-1-1-2',
children: [],
},
{
id: 'cl1844',
parentId: 'cl1840',
type: 'theme',
themeId: 't953',
themeName: null,
name: '二级测试数据-1-1-3',
children: [],
},
],
},
],
},
{
id: 'cl1814',
parentId: 'cl1774',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-2',
children: [
{
id: 'cl1817',
parentId: 'cl1814',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-2-1',
children: [
{
id: 'cl1818',
parentId: 'cl1817',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-2-1-1',
children: [
{
id: 'cl1819',
parentId: 'cl1818',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-2-1-1-1',
children: [
{
id: 'cl1825',
parentId: 'cl1819',
type: 'theme',
themeId: 't937',
themeName: null,
name: '二级测试数据-2-1-1-1-1',
children: [],
},
],
},
],
},
],
},
],
},
{
id: 'cl1816',
parentId: 'cl1774',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-3',
children: [
{
id: 'cl1826',
parentId: 'cl1816',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-3-1',
children: [
{
id: 'cl1828',
parentId: 'cl1826',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-3-1-1',
children: [
{
id: 'cl1830',
parentId: 'cl1828',
type: 'theme',
themeId: 't940',
themeName: null,
name: '二级-3-1-1-1',
children: [],
},
],
},
{
id: 'cl1831',
parentId: 'cl1826',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-3-1-2',
children: [
{
id: 'cl1833',
parentId: 'cl1831',
type: 'theme',
themeId: 't942',
themeName: null,
name: '二级-3-1-2-1',
children: [],
},
],
},
{
id: 'cl1834',
parentId: 'cl1826',
type: 'folder',
themeId: '',
themeName: null,
name: '二级-3-1-3',
children: [
{
id: 'cl1836',
parentId: 'cl1834',
type: 'theme',
themeId: 't952',
themeName: null,
name: '二级-3-1-3-1',
children: [],
},
],
},
{
id: 'cl1835',
parentId: 'cl1826',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-3-1-4',
children: [
{
id: 'cl1837',
parentId: 'cl1835',
type: 'theme',
themeId: 't955',
themeName: null,
name: '二级-3-1-4-1',
children: [],
},
],
},
],
},
{
id: 'cl1827',
parentId: 'cl1816',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-3-2',
children: [
{
id: 'cl1838',
parentId: 'cl1827',
type: 'folder',
themeId: null,
themeName: null,
name: '二级-3-2-1',
children: [
{
id: 'cl1839',
parentId: 'cl1838',
type: 'theme',
themeId: 't958',
themeName: null,
name: '二级-3-2-1-1',
children: [],
},
],
},
],
},
],
},
],
},
]
abc.vue
<a-tree
v-model="checkedKeys"
:expanded-keys="expandedKeys"
:auto-expand-parent="autoExpandParent"
:replaceFields="replaceFields"
checkable
:tree-data="treeData"
@expand="onExpand"
@select="onSelect"
@check="onCheck"
>
<template slot="title" slot-scope="item">
<span>{{ item.name }} {{ countChecked(item) }}</span>
</template>
</a-tree>
data(){
return {
checkedKeys: [],
expandedKeys: [],
autoExpandParent: true,
replaceFields: {
title: 'name',
key: 'id',
children: 'children',
},
fileList: ['theme'],
}
},
methods:{
onCheck(checkedKeys, { checked }) {
this.checkedKeys = checkedKeys
},
countChecked(node) {
let totals = 0
let checkedNum = 0
const addNum = (arr) => {
for (let i = arr.length - 1; i >= 0; i -= 1) {
const item = arr[i]
if (this.fileList.includes(item.type)) {
totals += 1
if (this.checkedKeys.includes(item.id)) {
checkedNum += 1
}
}
if (item.children?.length) addNum(item.children)
}
}
if (!this.fileList.includes(node.type)) {
if (node.children?.length) addNum(node.children)
return `(${checkedNum}/${totals})`
}
},
}