Ant Design of Vue a-tree 自定义样式 自定义内容

autoExpandParent:true,
expandedKeys:[],
currentId: '',
dataList: [],
treeData: [],
parentNode: [], //存放父节点

 <a-tree
                class="tree-main-table"
                showIcon
                @select="onSelect"
                :treeData="treeData"
                :expanded-keys="expandedKeys"
                :autoExpandParent="autoExpandParent"
                @expand="onExpand"
            >
                <template slot="custom" slot-scope="{ title, slots, expanded, key }">
                    <!-- 父亲节点 -->
                    <div class='tree-parent' :class="expanded && slots.icon == 'parent' ? 'tree-select-parent' : currentId == key && slots.icon == 'child' ? 'tree-select-child tree-child' : slots.icon == 'child' ? 'tree-child' : ''" >
                        <a-icon v-if="slots.icon == 'parent'" :type="expanded ? 'minus' : 'plus'" style="color:#4A8088"/>
                        <span v-if="slots.icon == 'child'" class="iconfont iconlingxingkuang icon-linng-xing"></span>
                        <span style="margin-left:10px" class="tree-title" :title="title">{{ title }}</span>
                        <span v-if="slots.icon == 'child' && currentId == key " class="iconfont iconduigou1 icon-duigou1"></span>
                    </div>
                </template>
            </a-tree>

  treeControl(){
       let that = this
       postAction(mySpObject.typeAll,{"tableName":"dict_business_type"}).then((res) => {
           if (res.success) {
               that.treeData = []
               that.parentNode = []
               for (let i = 0; i < res.result.length; i++) {
                   let temp = res.result[i]
                   temp.slots = {icon: 'parent'}
                   temp.scopedSlots = {title: "custom"}
                   that.parentNode.push(temp.key)
                   if(temp.children && temp.children.length > 0){
                       for (let j = 0; j < temp.children.length; j++) {
                           var disabled = temp.children[j].sign == "objects" ? false : true
                           temp.children[j].disabled = disabled
                           temp.children[j].slots = {icon: 'child'}
                           temp.children[j].scopedSlots = {title: "custom"}
                       }
                   }
                   that.treeData.push(temp)
               }
               console.log(that.treeData,'that.treeData')
               this.reWriterWithSlot(that.treeData)
           } else {
               that.$message.warning(res.message)
           }
       })
   },
   reWriterWithSlot(arr){
       for(let item of arr){
           if(item.children && item.children.length>0){
               this.reWriterWithSlot(item.children)
               let temp = Object.assign({},item)
               temp.children = {}
               this.dataList.push(temp)
           }else{
               this.dataList.push(item)
           }
       }
   },        

//展开/收起节点时触发
onExpand(key) {
    if(key){
        for (let i = 0; i < this.expandedKeys.length; i++) {
            if(key == this.expandedKeys[i]){ //如果有 则说明这个已经点开了 则
                this.expandedKeys.splice(i,1)
                return
            }
        }
        this.expandedKeys.push(key)
    }
    this.autoExpandParent = false
},
onSelect(selectedKeys, e) {
    const { node } = e  //node.eventKey
    for (let i = 0; i < this.parentNode.length; i++) {
        // ==  说明当前点击的是父节点 控制当前展开还是收起
        if(this.parentNode[i] == node.eventKey){
            this.onExpand(node.eventKey)
            return
        }
    }

    //点击非上一个 则重新调取
    if(node.eventKey !== this.currentId){
        this.currentId = node.eventKey
        this.requestHeader()
        this.loadData()
    }
},

css

//树形控件样式
.tree-control{
    width: 16.5625rem;
    height: 100%;
    background: #F6F7F8;
    border-right: 1px solid #D6D8DC;
    padding: 0 .75rem;
    .all-data{
        font-size: 1.0625rem;
        font-weight: 600;
        color: #373737;
        padding-top: .5rem;
    }
    .tree-main-table{
        .tree-parent{
            width: 14.9375rem;
            height: 100%;
            color: #373737;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
        }
        .tree-select-parent{
            background: #EDF2F3;
            color: #373737;
        }
        .tree-select-child{
            background: #EDF2F3;
            color: #4A8088;
        }
        .tree-child{
            padding-left: 22px;
            overflow: hidden;
            display: flex;
            align-items: center;
        }
        .icon-linng-xing{
            font-size: .125rem;
            color: #BAD2F9;
        }
        .icon-duigou1{
            color: #4A8088;
            font-size: .75rem;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
        .tree-title{
            display: inline-block;
            width: 60%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    }
}
/deep/.ant-table-tbody .ant-table-row td:nth-of-type(2) {
    padding: 9px 16px;
  }
/deep/.ant-tree li .ant-tree-node-content-wrapper{
    padding: 0px;
}
/deep/.ant-tree li ul{
    padding: 0;
}
/deep/.ant-tree li span.ant-tree-switcher{
    display: none;
}
/deep/.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
    background-color: transparent;
}
/deep/.ant-tree li .ant-tree-node-content-wrapper:hover{
    background-color: transparent;
}