概要

在开发树形时,默认是没有图标的,比如菜单,资源分配时,选择起来不是很方便,如果有图标就会清晰很多。

实现办法

比如菜单授权界面

我们看到菜单 ,接口 ,按钮一目了然。

相关代码

 buildtree(list, permissions, parentId) {
      list.forEach(item => {
        if (item.parentId === parentId) {
          var child = {
            key: item.id,
            title: item.name,
            children: [],
            //增加此行代码,menuType 对应图标类型
            slots: { icon: item.menuType }
          }
          this.buildtree(list, child.children, item.id)
          permissions.push(child)
        }
      })
    },

树形控件代码

<a-tree checkable v-model="checkedKeys" @check="onCheck"
                :treeData="permissions"
                :checkStrictly="checkStrictly"
                showIcon
        >
            <a-icon slot="I" type="italic" />
            <a-icon slot="C" type="bars" />
            <a-icon slot="F" type="bold" />
</a-tree>
  • 指定图标solt 和上面的 menuType相对应
  • 树形增加 showIcon
文档更新时间: 2022-03-27 16:09   作者:zyg