鍍金池/ 問答/HTML/ vue數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換

vue數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換

現(xiàn)在項(xiàng)目的需求是做邏輯樹對(duì)應(yīng)相應(yīng)的語句，邏輯樹的結(jié)構(gòu)已經(jīng)做好，如下：
圖片描述

var treeObj = [{
            value: '1',
            child:[
                { 
                    value: '1.1',
                    child:[]
                },
                {
                    value: '1.2',
                    child:[]
                }
            ]
        }]

現(xiàn)在需要把它渲染成類似
1 1.1
1 1.2
這樣的結(jié)構(gòu)
我的思路是將上面結(jié)構(gòu)另外轉(zhuǎn)化 請(qǐng)問這樣是不是最好的？如果是，請(qǐng)問怎么轉(zhuǎn)化，并且轉(zhuǎn)化成什么樣的數(shù)據(jù)結(jié)構(gòu)會(huì)好點(diǎn)？

回答
編輯回答
舊螢火

保證數(shù)據(jù)是json數(shù)組，vue循環(huán)嵌套

  <ul>
    <li v-for='val in treeObj'>
       <p  v-for='item in val.child' >
         {{val.value}}-{{item.value}}
       </p>
    </li>
  </ul>
    data() {
      return {
        treeObj: [{
          value: '1',
          child:[
            {
              value: '1.1',
              child:[]
            },
            {
              value: '1.2',
              child:[]
            }
          ]
        }]
      }
    },
2018年7月21日 23:39
編輯回答
淚染裳

對(duì)于這種結(jié)構(gòu)，我意見是通過v-html渲染，渲染內(nèi)容 通過js來寫，就是寫一個(gè)遞歸函數(shù)
function checkChild(input){

for (var i=0; i<input.length; i++){
    if (input[i].hasOwnProperty('child')){
        checkChild(input[i]['child'])
    }
}

}
對(duì)于你這種需求我覺得即便可能層級(jí)很深但是最好也不要超過3層，
太深的情況我覺得能讓后臺(tái)幫你轉(zhuǎn)格式甚至后臺(tái)渲染都比前端做代價(jià)要小

2017年10月3日 06:31