this.$nextTick(() => { this.$refs.tree.setCheckedKeys(roads); });vue3写法

这段代码是使用 Vue.js 3 的语法，用于在 DOM 更新后设置树形组件的选中项。具体来说，`this.$nextTick` 方法会在下一次 DOM 更新循环结束后执行回调函数，确保在 DOM 更新完毕后再操作 DOM。回调函数中的 `this.$refs.tree` 引用了树形组件的实例，`setCheckedKeys(roads)` 方法用于设置树形组件的选中项，其中 `roads` 是一个数组，包含了选中的节点的 key 值。需要注意的是，`$nextTick` 方法和 `$refs` 引用都是 Vue.js 的特殊语法，需要在 Vue.js 组件中使用。

<div class="fullstock" :class="{ full: flag4 }"> <stock class="stock" ref="stock2"></stock> <div class="iconfont icon-expand-alt icon" @click="fullscreen4" v-if="!flag4" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen4" v-else ></div> </div> </div> </div> </div> </template> <script> import { mapState } from "vuex"; import hot from "@/components/Hot.vue"; import seller from "@/components/Seller.vue"; import trend from "@/components/Trend.vue"; import Map from "@/components/Map.vue"; import rank from "@/components/Rank.vue"; import stock from "@/components/Stock.vue"; export default { name: "HomeView", data() { return { flag: false, flag1: false, flag2: false, flag3: false, flag4: false, flag5: false, }; }, components: { hot, seller, trend, Map, rank, stock, }, methods: { changetheme() { this.$store.commit("tabtheme"); }, fullscreen() { this.flag = true; this.$nextTick(() => { this.$refs.seller2.changesize(); }); }, fullscreen1() { this.flag1 = true; this.$nextTick(() => { this.$refs.trend2.screenAdapter(); }); }, fullscreen2() { this.flag2 = true; this.$nextTick(() => { this.$refs.rank2.screenAdapter(); }); }, fullscreen3() { this.flag3 = true; this.$nextTick(() => { this.$refs.hot2.screenAdapter(); }); }, fullscreen4() { this.flag4 = true; this.$nextTick(() => { this.$refs.stock2.screenAdapter(); }); }, fullscreen5() { this.flag5 = true; this.$nextTick(() => { this.$refs.map2.screenAdapter(); }); }, smallscreen() { this.flag = false; this.$nextTick(() => { this.$refs.seller2.changesize(); }); },优化后代码

<div class="fullstock" :class="{ full: flag4 }"> <stock class="stock" ref="stock2"></stock> <div class="iconfont icon-expand-alt icon" @click="fullscreen4" v-if="!flag4"></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen4" v-else></div> </div> </template> <script> import { mapState } from "vuex"; import hot from "@/components/Hot.vue"; import seller from "@/components/Seller.vue"; import trend from "@/components/Trend.vue"; import Map from "@/components/Map.vue"; import rank from "@/components/Rank.vue"; import stock from "@/components/Stock.vue"; export default { name: "HomeView", data() { return { flag: false, flag1: false, flag2: false, flag3: false, flag4: false, flag5: false, }; }, components: { hot, seller, trend, Map, rank, stock, }, methods: { changetheme() { this.$store.commit("tabtheme"); }, fullscreen4() { this.flag4 = true; this.$nextTick(() => { this.$refs.stock2.screenAdapter(); }); }, smallscreen4() { this.flag4 = false; this.$nextTick(() => { this.$refs.stock2.screenAdapter(); }); }, }, }; </script>

data() { return { flag: false, flag1: false, flag2: false, flag3: false, flag4: false, flag5: false, }; }, components: { hot, seller, trend, Map, rank, stock, }, methods: { changetheme() { this.$store.commit("tabtheme"); }, full() { this.flag = true; this.$nextTick(() => { this.$refs.seller2.changesize(); }); }, full1() { this.flag1 = true; this.$nextTick(() => { this.$refs.trend2.screenAdapter(); }); }, full2() { this.flag2 = true; this.$nextTick(() => { this.$refs.rank2.screenAdapter(); }); }, full3() { this.flag3 = true; this.$nextTick(() => { this.$refs.hot2.screenAdapter(); }); }, full4() { this.flag4 = true; this.$nextTick(() => { this.$refs.stock2.screenAdapter(); }); }, full5() { this.flag5 = true; this.$nextTick(() => { this.$refs.map2.screenAdapter(); }); },优化后代码

data() { return { flags: [false, false, false, false, false, false], }; }, components: { hot, seller, trend, Map, rank, stock, }, methods: { changetheme() { this.$store.commit("tabtheme"); }, full(index) { this.flags[index] = true; this.$nextTick(() => { switch (index) { case 0: this.$refs.seller2.changesize(); break; case 1: this.$refs.trend2.screenAdapter(); break; case 2: this.$refs.rank2.screenAdapter(); break; case 3: this.$refs.hot2.screenAdapter(); break; case 4: this.$refs.stock2.screenAdapter(); break; case 5: this.$refs.map2.screenAdapter(); break; default: break; } }); }, },

阅读全文

this.$nextTick(() => { this.$refs.tree.setCheckedKeys(roads); });vue3写法

相关推荐

vue中nextTick用法实例

vue中$nextTick的用法讲解

Vue中this.$nextTick的作用及用法

this.$nextTick(() => { this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true; })

this.$nextTick(_=>{ this.$refs.saveTagInput.$refs.input.focus() })帮我解析一下这行代码

this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.removeId); });

vue中 this.$nextTick(() => { this.$refs.table.init()}) 的含义

handleEdit(row) { this.form = JSON.parse(JSON.stringify(row)) this.dialogFormVisible = true this.$nextTick(() => { if(this.$refs.img) { this.$refs.img.clearFiles(); } if(this.$refs.file) { this.$refs.file.clearFiles(); } }) 添加注释

this.$nextTick(() => { setTimeout(() => { this.show = false this.$emit('close') }, 300) })

this.$nextTick(function() { //进入页面滚动到底部 this.scrollTop = 9999; this.$nextTick(function() { this.scrollAnimation = true; }); });

this.$nextTick(() => {this.$refs.ipModel1.resetIP()})

浅谈Vue.nextTick 的实现方法

大家在看

华为OLT MA5680T工具.zip

STP-RSTP-MSTP配置实验指导书 ISSUE 1.3

基于FPGA的AD9910控制设计

Android全景视频播放器 源代码

pytorch-book:《神经网络和PyTorch的应用》一书的源代码

最新推荐

Vue 解决通过this.$refs来获取DOM或者组件报错问题

造纸机变频分布传动与Modbus RTU通讯技术的应用及其实现

langchain4j-neo4j-0.29.1.jar中文文档.zip

Visual C++.NET编程技术实战指南

HarmonyOS内核深度探秘：优化自由行旅游系统的策略

tkinter模块所有控件

局域网五子棋游戏：娱乐与聊天的完美结合

自由行旅游新篇章：HarmonyOS技术融合与系统架构深度解析

足底支撑相到达73%是什么问题

宾馆预约系统开发与优化建议

Android全景视频播放器源代码