ant-design在tree的每个item的右边显示自定义的按钮,代码如下:
<a-tree :tree-data="treeData" default-expand-all show-icon :default-selected-keys="['0-0-0']"> <a-icon slot="apartment" type="apartment" style="color:#1890ff" /> <a-icon slot="file-text" type="file-text" /> <template slot="custom" slot-scope="item"> <span>{{ item.title }}</span> <span class="but_operation"> <span class="but_type" @click="()=> append(item)">编辑</span> <span class="but_type" style="right:120px;" @click="()=> edit(item)">删除</span> <span class="but_type" @click="(e)=> remove(item)">新建</span> </span> </template> </a-tree>
// 树形菜单数据 treeData: [ { title: '全部', key: '0-0', slots: { icon: 'apartment' }, children: [ { title: '德风石化有限公司', key: '0-0-0', slots: { icon: 'apartment' }, children: [ { title: '公共工程', key: '0-0-0-0', slots: { icon: 'apartment' }, children: [ { title: '中心控制室', key: '0-0-0-0-0', scopedSlots: { icon: 'file-text', title: 'custom' } }, { title: '辅料管区', key: '0-0-0-0-1', scopedSlots: { icon: 'file-text', title: 'custom' } }, { title: 'PSA伐区', key: '0-0-0-0-2', scopedSlots: { icon: 'file-text', title: 'custom' } }, { title: '导热油房区', key: '0-0-0-0-3', scopedSlots: { icon: 'file-text', title: 'custom' } }, { title: '甲醇裂解区', key: '0-0-0-0-4', scopedSlots: { icon: 'file-text', title: 'custom' } }, { title: '机柜间', key: '0-0-0-0-5', scopedSlots: { icon: 'file-text', title: 'custom' } } ] }, { title: '污水处理站', key: '0-0-0-1', scopedSlots: { icon: 'apartment' } } ] } // { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'apartment' } } ] } ],
.but_type { color: #1890ff; cursor: pointer; padding-left: 5px; padding-right: 5px; } /*修改全局a-tree样式*/ .ant-tree { position: relative; } .ant-tree > li span.ant-tree-node-content-wrapper::before, .ant-tree .ant-tree-child-tree > li span.ant-tree-node-content-wrapper::before{ position: absolute; right: 0; left: 0; height: 24px; -webkit-transition: all 0.3s; transition: all 0.3s; content: ''; } .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected::before{ background: rgba(173, 224, 251, 0.4); } .ant-tree li .ant-tree-node-content-wrapper:hover { background-color: transparent; color: #000; } .ant-tree li .ant-tree-node-content-wrapper:hover .but_operation { opacity: 1; } .ant-tree li .ant-tree-node-content-wrapper:hover.ant-tree-node-content-wrapper-normal::before, .ant-tree li .ant-tree-node-content-wrapper:hover.ant-tree-node-content-wrapper::before{ background: rgba(173, 224, 251, 0.4); color: #000; } .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{ background: transparent; } .ant-tree > li span.ant-tree-node-content-wrapper.ant-tree-node-selected { color: #000; background: transparent; } .ant-tree li span.ant-tree-switcher { z-index: 1; }