Vue3 setup中使用$refs的方法详解
在 Vue 3 中的 Composition API 中, $refs
并不直接可用于 setup
函数。这是因为 $refs
是 Vue 2 的实例属性,而在 Vue 3 中, setup
函数是与模板实例分离的,不再使用实例属性。
实际工作中确实有需求,在 setup
函数使用$refs,下面有两种方法。
方案
方案一:getCurrentInstance
<template> <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" /> <el-table-column label="Date" width="120"> <template #default="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column property="name" label="Name" width="120" /> <el-table-column property="address" label="Address" show-overflow-tooltip /> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle selection status of second and third rows</el-button> <el-button @click="toggleSelection()">Clear selection</el-button> </div> </template> <script setup> import { ref, getCurrentInstance } from 'vue' const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-08', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-06', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-07', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, ] const multipleSelection = ref([]) const handleSelectionChange = (val) => { multipleSelection.value = val } const {proxy} = getCurrentInstance(); const toggleSelection = (rows) => { if (rows) { rows.forEach((row) => { proxy.$refs.multipleTableRef.toggleRowSelection(row, undefined) }) } else { proxy.$refs.multipleTableRef.clearSelection() } } </script>
方案二: ref
<template> <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" /> <el-table-column label="Date" width="120"> <template #default="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column property="name" label="Name" width="120" /> <el-table-column property="address" label="Address" show-overflow-tooltip /> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle selection status of second and third rows</el-button> <el-button @click="toggleSelection()">Clear selection</el-button> </div> </template> <script setup> import { ref } from 'vue' const tableData = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-08', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-06', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-07', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, ] const multipleTableRef = ref() const multipleSelection = ref([]) const handleSelectionChange = (val) => { multipleSelection.value = val } const toggleSelection = (rows) => { if (rows) { rows.forEach((row) => { multipleTableRef.value.toggleRowSelection(row, undefined) }) } else { multipleTableRef.value.clearSelection() } } </script>
在这个示例中,multipleTableRef
是一个通过 ref
创建的响应式变量,用于存储对 el-table
元素的引用。
结果显示
到此这篇关于Vue3 setup中使用$refs的方法详解的文章就介绍到这了,更多相关Vue3 setup内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-01-01关于vue-lunar-full-calendar的使用说明
这篇文章主要介绍了关于vue-lunar-full-calendar的使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate
这篇文章主要介绍了解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
今天小编就为大家分享一篇vue-auto-focus: 控制自动聚焦行为的 vue 指令方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08在 Vite项目中使用插件 @rollup/plugin-inject 注入全局 jQuery的过程详解
在一次项目脚手架升级的过程中,将之前基于 webpack 搭建的项目移植到 Vite 构建,这篇文章主要介绍了在 Vite项目中,使用插件 @rollup/plugin-inject 注入全局 jQuery,需要的朋友可以参考下2022-12-12
最新评论