ant-design中树形菜单tree中加入新增编辑删除按钮

Posted 2021-06-23 小敏子

<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样式*/
/*全局修改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;
}
/*全局修改a-tree样式——结束*/