Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作_elementui树形表格增删改查 - CSDN文库

33 浏览量更新于2023-05-06 评论 4 收藏 120KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Element-ui树形控件树形控件el-tree自定义增删改和局部刷新及懒加载操作自定义增删改和局部刷新及懒加载操作

需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。

增加节点，点击确定后局部刷新，渲染新数据。

源码

element组件样式组件样式

<el-tree

class="treeitems"

:data="data"

node-key="id"

:props="defaultProps"

:load="loadNode"

lazy

:default-expanded-keys="[0]"

@node-click="handleNodeClick"

draggable

:allow-drop="allowDrop"

:allow-drag="allowDrag"

@node-drop="handleDrop"

ref="tree"

>

<span class="custom-tree-node" slot-scope="{ node, data }">

<span>{{ node.label }}</span>

<span>

<i @click="() => append(node,data)" class="el-icon-plus"></i>

<i v-if="data.id !== 0" @click="() => deletes(node,data)" class="el-icon-delete"></i>

<i v-if="data.id !== 0" @click="() => rename(node,data)" class="el-icon-edit"></i>

</span>

</span>

</el-tree>

data数据数据

data() {

return {

filterText: '',

data: [{

id:0,

label: '中国',

}],

children: [{

id:1,

label: '北京',

children: [{

id:11,

label: '通州'

}] },

{

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余6页未读，立即下载

评论0

weixin_38542223

粉丝: 8
资源: 902

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈