vue tree选中数据数量统计

325 阅读2分钟

只贴实现代码,不管逻辑


Element UI、Ant-design-vue 都可以用

image.png

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})`
        }
    },
}