vue el-tree懒加载默认展开一级，懒加载刷新（默认高亮某个节点，触发某个节点的点击事件）

场景

如上图所示，左边展示分组及分组下的标签，点击某个标签，在右边展示某个标签的详情，可以对标签内容进行编辑保存，还可对标签进行搜索，默认展示全部标签，展开一级不目下标签，若对标签进行搜索筛选，则把每个节点都展开

实现准备

准备两棵树，一颗树存放全量标签，一棵树存放筛选后的标签
在获取懒加载数据时缓存第一个节点，在编辑标签保存后刷新列表时使用
每次编辑标签时，先把编辑的标签进行本地存储，在刷新树状列表完成后根据id进行高亮回显及标签展示

实现步骤

//这棵树是搜索标签时展示的树
<div v-if="Boolean(searchTreeList)"><el-treeref="tree1"class="trees"@node-click="handleNodeClick":data="searchTreeList"check-on-click-node:expand-on-click-node="false":props="defaultProps"node-key="id":highlight-current="true":filter-node-method="filterNode"default-expand-all><div slot-scope="{ data }" class="text-hidden"><el-tooltipclass="item"effect="dark":content="data.name"placement="top-start"><span><qz-iconclass="icon-style icon-folder"v-if="!data.isLabel"></qz-icon>{{ data.name }}</span></el-tooltip></div></el-tree>
</div>
//这棵树是默认展示全量标签时展示的
<div class="data-tag-list" v-else><el-treev-if="!this.tags"ref="tree"class="trees"@node-click="handleNodeClick":data="tagsList"check-on-click-node:expand-on-click-node="false":props="defaultProps"node-key="id":highlight-current="true":filter-node-method="filterNode":load="loadNode"lazy:default-expanded-keys="defaultExpend":current-node-key="defaultExpend[0]"><div slot-scope="{ data }" class="text-hidden"><el-tooltipclass="item"effect="dark":content="data.name"placement="top-start"><span><qz-iconclass="icon-style icon-folder"v-if="!data.isLabel"></qz-icon>{{ data.name }}</span></el-tooltip></div></el-tree>
</div>
export default {data(){},methods:{// 懒加载节点loadNode(node, resolve) {let that = this;if (node && node.level === 0) {//把节点缓存起来，在编辑标签保存后刷新懒加载列表时使用this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来that.getTreeList(resolve);} else {this.getTreeList(resolve, node && node.data);resolve([]);}},// 获取树状节点getTreeList(resolve, node = "") {if (node.isLabel || this.tags) {resolve([]);} else {let label = node? node.categoryId? node.categoryId + "-" + node.id: node.id: "";// 获取树状数据getTreeLabels(this.type, label).then((res) => {// 获取上次编辑的标签let current = JSON.parse(sessionStorage.getItem("currentLabel"));if (current) {// 如果含有搜索条件if (this.filterText.trim()) {this.$nextTick(() => {//高亮上次编辑的标签this.$refs.tree1 && this.$refs.tree1.setCurrentKey(current.id);// 获取高亮节点的node节点let currentNode =this.$refs.tree1 && this.$refs.tree1.getNode(current.id);// 触发高亮节点的点击事件，吧这个标签的详情展示在右边currentNode?this.handleNodeClick(currentNode.data, currentNode):''});} else {//在展示全量标签this.$nextTick(() => {// 获取高亮标签的分组，并展开标签所在分组this.defaultExpend = current.categoryId.split("-");this.defaultExpend.push(current.id);});this.$nextTick(() => {this.$refs.tree && this.$refs.tree.setCurrentKey(current.id);let currentNode =this.$refs.tree && this.$refs.tree.getNode(current.id);currentNode?this.handleNodeClick(currentNode.data, currentNode):''});}} else {this.defaultExpend = [];this.searchDefault(res.data);}resolve(res.data);}).catch((err) => {console.log(err.msg || "");});}},// 点击标签展示详情handleNodeClick(data, Node) {// this.isShowSave = false;this.isNew = false;if (Node.level != 1 && data.isLabel) {this.item = data;this.rightTitle = data.name;}},//默认展示最里面一层的第一个,如果是保存编辑后的刷新，则展示编辑项searchDefault(arr) {arr[0] && arr[0].id ? this.defaultExpend.push(arr[0].id) : "";if (this.type == "field" && arr[0]) {if (arr[0].children && arr[0].children.length) {this.searchDefault(arr[0].children);} else {this.$nextTick(() => {this.item = arr[0] || {};this.rightTitle = arr[0].name;this.$refs.tree && this.$refs.tree.setCurrentKey(this.rightTitle);this.$refs.tree1 && this.$refs.tree1.setCurrentKey(this.rightTitle);});}} else if (this.type == "table" && arr[0]) {if (arr[0] && arr[0].tableChildren) {this.searchDefault(arr[0].tableChildren);} else {this.$nextTick(() => {this.item = arr[0] || {};this.rightTitle = arr[0] && arr[0].name;this.$refs.tree && this.$refs.tree.setCurrentKey(this.rightTitle);this.$refs.tree1 && this.$refs.tree1.setCurrentKey(this.rightTitle);});}} else if (!arr[0]) {this.item = {};this.rightTitle = "";}},// 刷新树状列表(编辑标签保存后触发refresh方法)refresh(res, save) {if (this.filterText.trim()) {getSearchLabels(this.type, this.filterText).then((res) => {this.searchTreeList = res.data;this.searchDefault(res.data);}).catch(() => {});} else {this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法}}},mounted(){}
}

vue el-tree懒加载默认展开一级，懒加载刷新（默认高亮某个节点，触发某个节点的点击事件）相关推荐

在网页加载完毕时，自动触发某个按钮的点击事件（HTML）
在网页加载完毕时自动触发某个按钮的点击事件需求: 在使用bootstrap 模态框时,需要模态框在网页加载完毕后,自动显示模态框,而不是通过按钮激活模态框. 解决思路: 在window.onload ...
在网页加载完毕时自动触发某个按钮的点击事件
在网页加载完毕时自动触发某个按钮的点击事件需求: 在使用bootstrap 模态框时需要模态框在网页加载完毕后自动显示模态框而不是通过按钮激活模态框解决思路:在window.onload() 方 ...
avue-tree默认展开一级菜单
在treeOption中添加defaultExpandedkeys:[展开的父级Id]id为字符串时,需要加双引号
vue模拟触发另一个按钮点击事件
vue.js 1,给另一个按钮添加ref <el-button size="small" type="primary" ref="import& ...
popwindow 加个边框_利用popupwindow生成带有列表的对话框，并设置对话框列表的点击事件...
点击某个View弹出popupwindow列表: 代码:private ArrayAdapter adapter_huoMing; private PopupWindow popupWindow; / ...
关于element tree树形结构设置默认展开第一级，第二级，第三级，以此类推
官方default-expand-all是否默认展开所有节点,这个在这里已经不够用了. 第一步:设置node-key属性,每个树节点用来作为唯一标识的属性,整棵树应该是唯一的.例如:node-key= ...
antd可展开的表格怎么默认展开
写项目的时候不少场景用到了antd的这种表格,使用起来简单,方便,但是有可能会遇到一些问题例如: 表格默认展开失效的问题 defaultExpandAllRows 我们使用这个方法之后发现表格并没有 ...
vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
Vue的事件处理，点击事件
目录 1. v-on:click 绑定属性示例: 2. v-on:click 绑定方法示例: 3. v-on:click 绑定特殊变量示例: 4.事件处理的修饰符按键修饰符: v-model表单修饰 ...

vue el-tree懒加载默认展开一级，懒加载刷新（默认高亮某个节点，触发某个节点的点击事件）

场景

实现准备

实现步骤

vue el-tree懒加载默认展开一级，懒加载刷新（默认高亮某个节点，触发某个节点的点击事件）相关推荐

最新文章

热门文章