ElementUi 的tree组件结点为什么只能加，不能减

Question

分别使用ElementUi的tree组件和li 标签渲染一个数组对象，并同时对这个数组对象进行增删操作，发现li` 标签，view 和model 同时更新，但是tree组件只增不减，不知道是为什么？

ElementUi 的tree组件

 <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)
    }
}

Answer 1

在减的代码里, 加一个this.selectInfo = this.selectInfo.slice(0) 试一下