SOURCE

const data=[{
 "attributeid": 73,
 "attributename": "花生油",
 "parentid": 69,
 "issys": 0
}, {
 "attributeid": 71,
 "attributename": "地沟油",
 "parentid": 69,
 "issys": 0
}, {
 "attributeid": 70,
 "attributename": "麻油",
 "parentid": 69,
 "issys": 0
}, {
 "attributeid": 69,
 "attributename": "油",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 68,
 "attributename": "葱花",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 67,
 "attributename": "多葱",
 "parentid": 65,
 "issys": 0
}, {
 "attributeid": 66,
 "attributename": "多葱",
 "parentid": 65,
 "issys": 0
}, {
 "attributeid": 65,
 "attributename": "葱",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 64,
 "attributename": "变态辣",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 63,
 "attributename": "微辣",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 62,
 "attributename": "中辣",
 "parentid": 60,
 "issys": 0
}, {
 "attributeid": 61,
 "attributename": "中辣",
 "parentid": 60,
 "issys": 0
}, {
 "attributeid": 60,
 "attributename": "果糖",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 59,
 "attributename": "多糖",
 "parentid": 57,
 "issys": 0
}, {
 "attributeid": 58,
 "attributename": "多糖",
 "parentid": 57,
 "issys": 0
}, {
 "attributeid": 57,
 "attributename": "埃曼思",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 56,
 "attributename": "好多冰",
 "parentid": 54,
 "issys": 0
}, {
 "attributeid": 55,
 "attributename": "好多冰",
 "parentid": 54,
 "issys": 0
}, {
 "attributeid": 54,
 "attributename": "冰2",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 53,
 "attributename": "多冰",
 "parentid": 51,
 "issys": 0
}, {
 "attributeid": 52,
 "attributename": "多冰",
 "parentid": 51,
 "issys": 0
}, {
 "attributeid": 51,
 "attributename": "冰",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 42,
 "attributename": "甜度",
 "parentid": 0,
 "issys": 0
}, {
 "attributeid": 41,
 "attributename": "辣度",
 "parentid": 0,
 "issys": 0
}]


const convertData={};


data.forEach(item=>{
    const {parentid,attributeid}=item;
    /*父节点 */
    if(parentid===0){
        console.log('父节点是：',item.attributename);
        if(convertData[attributeid]){
            console.log('item:==',parentid);
            convertData[attributeid]=Object.assign(convertData[attributeid],{
                ...item
            })
        }else{
            convertData[attributeid]={
                old:true,
                ...item
            };
            convertData[attributeid]['children']={};
        }
    }
    /*子节点 */
    else{
        if(convertData[parentid]===void(0)){
            convertData[parentid]={
                'children':{}
            };
        }
        convertData[parentid]['children'][attributeid]={
            old:true,
            ...item
        };

        // convertData[parentid]['children'].push({
        //     old:true,
        //     ...item
        // });
    }
});

console.log(JSON.stringify(convertData));



new Vue({
    el:'#app',
    data:{
        convertData:convertData,
        curSelect:{},
        curAttr:{},
        selectData:{},
        inputType:'',
        inputAttr:''
    },
    created:function(){
        this.setDefaultActive();
    },
    mounted:function(){
        
    },
    methods:{
        setDefaultActive(){
            const {convertData}=this;
            const typesKey=Object.keys(convertData);
            if(typesKey.length>0){
                this.$set(this.convertData[typesKey[0]],'select',true);
                this.$set(this,'curSelect',convertData[typesKey[0]]);
            }
        },
        handelNewType:function(){
            const {inputType}=this;
            if(this.convertData[inputType]!==void(0)){
                alert('请不要重复添加');
                return;
            }
            this.$set(this.convertData,inputType,{
                attributeid:inputType,
                attributename:inputType,
                issys:0,
                parentid:0,
                children:[]         
            });
        },
        handelTypeSelect(item){
            const {attributeid}=item;
            this.$set(this,'curSelect',item);          
        },
        handelNewAttr(){
            const {inputType}=this;
            if(this.curSelect[inputType]!==void(0)){
                alert('请不要重复添加');
                return;
            }
            this.$set(this.convertData,inputType,{
                attributeid:inputType,
                attributename:inputType,
                issys:0,
                parentid:0,
                children:[]         
            });
        },
        handelAttrSelect(item){
            const {attributeid}=item;
            this.$set(this,'curAttr',item);   
        }
    }
})

<div id="app">
    <h2>种类</h2>
    <div @click="handelTypeSelect(parent)" :key="parent.attributeid" v-for="(parent,parentKey) in convertData" 
    class="list"
    :class="[
        curSelect.attributeid===parent.attributeid?'active':''
    ]"
    >
      
       {{parent.attributename}}
    </div>



    <div class="type-control">
        <label>种类:</label><input  type="text" placeholder="请输入种类" v-model="inputType" />
        <button @click="handelNewType">添加</button>
    </div>
    <h2>子属性</h2>
    <div  @click="handelAttrSelect(attr)" :key="attr.attributeid" v-for="(attr,attrKey) in curSelect.children" 
    class="list"
    :class="[
        curAttr.attributeid===attr.attributeid?'active':''
    ]"
    >
       {{attr.attributename}}
    </div>


    <div class="type-control">
        <label>子属性:</label><input  type="text" placeholder="请输入属性" v-model="inputType" />
        <button @click="handelNewType">添加</button>
    </div>

</div>

.list{
    display: inline-flex;
    padding: 5px 10px;
    border:1px solid #eeeeee;
    margin-right: 8px;
    cursor: pointer;
    border-radius: 4px;
    background-color: white;
    margin-bottom: 5px;
    transition: background,color 0.3s;
}

.type-control{
    margin: 16px 0;
}
.active{
    background-color: #65ab94;
    color: white;
}