use the tree component of ElementUi and the li tag to render an array object, and add and delete the array object at the same time. It is found that the li` tag, view and model are updated at the same time, but the tree component is only added. I don"t know why?
tree component of ElementUi
<el-tree class="filter-tree tree-scroll" :check-strictly="true" :data="selectInfo"
node-key="code" show-checkbox :props="{children: "childList",label: "label"}" default-expand-all
ref="leftTree">
</el-tree>
<ul>
<li v-for="oo in selectInfo" :key="oo.code">
{{oo.label}}---------{{oo.code}}
<ul>
<li v-for="xx in oo.childList" :key="xx.code">
{{xx.label}}---------{{xx.code}}
<ul>
<li v-for="mm in xx.childList" :key="mm.code">
{{mm.label}}---------{{mm.code}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
<el-button class="has-color" @click.stop="clickOnPush()">
<span class="el-icon-loading"></span>push()
</el-button>
<el-button class="has-color" @click.stop="clickOnPop()">
<span class="el-icon-loading"></span>pop()
</el-button>
<el-button class="has-color" @click.stop="clickOnShift()">
<span class="el-icon-loading"></span>shift()
</el-button>
<el-button class="has-color" @click.stop="clickOnUnshift()">
<span class="el-icon-loading"></span>unshift()
</el-button>
<el-button class="has-color" @click.stop="clickOnSplice()">
<span class="el-icon-loading"></span>splice()
</el-button>script:
created() {
this.selectInfo = [{code: "2", label: "er", childList: [{code: "25", label: "erwu"}, {code: "26", label: "erliu", childList: [{code: "266", label: "erliuliu"}, {code: "267", label: "erliuqi"}]}]}, {code: "3", label: "san"}]
},
methods: {
clickOnPush () {
this.selectInfo[0].childList[1].childList.push({label: "ersi", code: "24"})
},
clickOnPop () {
this.selectInfo[0].childList[1].childList.pop()
},
clickOnShift () {
this.selectInfo[0].childList[1].childList.shift()
},
clickOnUnshift () {
this.selectInfo[0].childList[1].childList.unshift({label: "linglingling", code: "000"})
},
clickOnSplice () {
this.selectInfo[0].childList[1].childList.splice(-1)
}
}