element ui tree左侧选中，右侧渲染，右侧删除单个标签，左侧对应标签不选中

效果如下图所示：
代码：

//左侧引入elementUI tree
<el-treeref="tree"node-key="id":expand-on-click-node="false":default-expand-all="true":data="dataTree":props="defaultProps":show-checkbox="isShowCheckbox"@check="getCurrentNode"/>```
//右侧结构如下：
<div>已选部门：
</div>
<div><div v-for="(item,index) in userGroupList" :key="item.id"><span class="choiceConItem">{{item.label}}</span><i class="el-icon-close fs_12 color-blue" @click="deleteItem(item,index)"></i></div>
</div>// 获取选中节点
getCurrentNode() {this.checkNodeList = this.$refs.tree.getCheckedNodes();this.userGroupList = this.checkNodeList;
},
deleteItem(item,index){this.userGroupList.splice(index,1);this.$refs.tree.setChecked(item.id);
},以上就是全部代码，欢迎大佬们指教~

element ui tree左侧选中，右侧渲染，右侧删除单个标签，左侧对应标签不选中相关推荐

Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...
element ui DatePicker 日期选择器限制只能选择今天之前或者之后--选择范围时选中第一个后前面的日期应该是禁止状态
picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期 time.getTime是把选中的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒 ...
element ui tree结构双击单机右键事件
<el-tree:data="data":props="defaultProps"@node-click="handleNodeClick&qu ...
element ui tree增删改查_clientgo连接K8s集群进行pod的增删改查
背景最近在看client-go源码最基础的部分,client-go的四类客户端,RestClient.ClientSet.DynamicClient.DiscoveryClient.其中RestCl ...
element ui 红点_Element-ui el-tree新增和删除节点后如何刷新tree的实例
Element-ui el-tree新增和删除节点后如何刷新tree的实例一, 当新增节点后刷新当前节点 node.loaded = false; node.expand(); //新建子节点是刷新 ...
element ui tree树节点数据平面化
有时候需要对树节点进行增删改查,因此需要快速找到要操作的这个节点.将label,children格式的数据平面化处理后,可以根据id等唯一标识字段快速定位节点,随后对其操作. 数据平面化操作: fun ...
element UI 中 el-tree 树形菜单新增、删除操作
效果图: 标签代码部分: <el-treeclass="tree-css":data="treeList" :props="defaultPro ...
点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...

element ui tree左侧选中，右侧渲染，右侧删除单个标签，左侧对应标签不选中

element ui tree左侧选中，右侧渲染，右侧删除单个标签，左侧对应标签不选中相关推荐

最新文章

热门文章