vue3 中通过$refs 获取子组件数据
vue2 中获取子组件中的数据方法,可以使用 $refs ,但此方式在vue3中不适用了。问题: 点击删除行的同时修改表格中数据选中状态,需要通过 refs 操作表格中的数据。 具体代码如下:
·
vue2 中获取子组件中的数据方法,可以使用 this.$refs
,但此方式在vue3中不适用了。
问题: 点击删除行的同时修改表格中数据选中状态,需要通过 ref
操作表格中的数据。 具体代码如下:
<template>
<el-table
ref="multipleTableRef"
:data="tableData"
style="width: 100%"
:show-header="false"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column property="address" label="Address" show-overflow-tooltip />
</el-table>
<ul>
<li v-for="(item, index) in multipleSelection" :key="item.id">
{{item.address}}
<i @click="del(index)">删除</i>
</li>
</ul>
</template>
<script setup>
import { ref } from 'vue'
const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
multipleSelection.value = val
}
const del = (index) => {
const a = multipleSelection.value[index]
multipleSelection.value.splice(index, 1)
// 通过 ref 操作table中的数据
multipleTableRef.value.toggleRowSelection(a, false)
}
const tableData = [
{
id: 1,
address: '数据1'
},
{
id: 2,
address: '数据2'
},
{
id: 3,
address: '数据3'
},
{
id: 4,
address: '数据4'
},
{
id: 5,
address: '数据5'
}
]
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)