最近项目PRD需求如下
有一个树形结构的菜单管理,与官网ant-design-vue
中提供的a-tree
不同
- 图标不同
- 每条数据hover的时候都有操作按钮
解决方案
第一个问题
这是不修改a-tree
的任何样式文件时出现的icon图标,与项目项目要求不符
若要改成项目PRD要求的那样只需改动一些样式即可
/deep/ .ant-tree li span.ant-tree-switcher{
width:16px;
height:16px;
margin:4px;
// 修改树结构合起的icon
&.ant-tree-switcher_close{
background:url('//assets.2dfire.com/frontend/b415e20fc703838e5a028437366ff22a.png') no-repeat;
background-size:contain;
i{
display: none;
}
}
// 修改树结构展开的icon
&.ant-tree-switcher_open{
background:url('//assets.2dfire.com/frontend/568ca02f82eee05829d276881363c22a.png') no-repeat;
background-size:contain;
i{
display: none;
}
}
}
第二个问题
ant-design-vue
中的a-tree
并未提供操作节点的方法