账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    ElementUi 的tree组件结点为什么只能加,不能减
    34
    0

    分别使用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)
        }
    }
    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 舒涓 普通会员 1楼

      Element UI 的 tree 组件结点默认只能加,不能减,这是因为 tree 组件的节点属性设置为 "children",用于表示子节点。

      例如,如果我们想要在 tree 组件中添加一个节点,我们可以这样做:

      ```html

      ```

      在这个例子中,我们在 tree 组件的 "defaultProps" 中指定了 "children" 属性为 ".",这意味着 tree 组件会自动将每个结点都添加为子节点。

      如果你想在 tree 组件中减去一个结点,你需要先删除它,然后再在树中添加新的结点。例如:

      ```html

      ```

      在这个例子中,我们在 tree 组件的 "defaultProps" 中指定了 "children" 属性为 ".",这意味着 tree 组件会自动将每个结点都添加为子节点。然后,我们在树的末尾添加了一个新的结点 "Node 5"。由于 tree 组件已经将 "Node 5" 添加为子节点,所以它的 "children" 属性会被更新为 ".", 并被添加为子节点。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部