- 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)
}
} - 共 0 条
- 全部回答
-
舒涓 普通会员 1楼
Element UI 的 tree 组件结点默认只能加,不能减,这是因为 tree 组件的节点属性设置为 "children",用于表示子节点。
例如,如果我们想要在 tree 组件中添加一个节点,我们可以这样做:
```html <el-tree :data="data" :props="defaultProps" :load="loadNode" @node-click="handleNodeClick"
<el-tree-node v-for="(node, index) in nodes" :key="index" :data="node" :props="defaultProps"> <span @click="handleNodeClick">{{ node.name }}</span> </el-tree-node>```
在这个例子中,我们在 tree 组件的 "defaultProps" 中指定了 "children" 属性为 ".",这意味着 tree 组件会自动将每个结点都添加为子节点。
如果你想在 tree 组件中减去一个结点,你需要先删除它,然后再在树中添加新的结点。例如:
```html <el-tree :data="data" :props="defaultProps" :load="loadNode" @node-click="handleNodeClick"
<el-tree-node v-for="(node, index) in nodes" :key="index" :data="node" :props="defaultProps"> <span @click="handleNodeClick">{{ node.name }}</span> </el-tree-node>```
在这个例子中,我们在 tree 组件的 "defaultProps" 中指定了 "children" 属性为 ".",这意味着 tree 组件会自动将每个结点都添加为子节点。然后,我们在树的末尾添加了一个新的结点 "Node 5"。由于 tree 组件已经将 "Node 5" 添加为子节点,所以它的 "children" 属性会被更新为 ".", 并被添加为子节点。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
