Vue，获得ref实例的问题？
本帖最后由 cqwcns 于 2022-10-17 13:34 编辑如图和以下代码。
我创建了一个element-plus table，第一列设置了筛选。
现在的功能需求是筛选后，我可以通过点击【重置表格的筛选】按钮，调用element-plus table的方法clearFilter来清除table的筛选状态。
但调用方法前我需要先获得这个table的实例，我尝试使用ref，但不知道我写错了哪里，获取不到实例。
麻烦各位大佬指教。感谢。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<head>
<!-- style -->
<link rel="stylesheet" href="https://unpkg.com/element-plus@2.2.17/dist/index.css" />
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
<!-- component library -->
<script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
</head>
</head>
<body>
<div id="app" style="width: 600px;">
<el-table :data="tableData">
<el-table-column v-for="(title,index) in tableHeader" :prop="title" :label="title"
:filters="index?null:tableFilters" :filter-method="index?null:filterHandler" ref="myTable" />
</el-table-column>
</el-table>
</br>
</br>
<el-button @click="clearTableFilter">重置表格的筛选</el-button>
</div>
<script>
let that = null,
{ ref } = Vue,
myTable = ref(),
App = {
data() {
return {
tableHeader: ['date', 'name', 'address', 'tag'],
tableData: [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home',
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office',
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home',
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office',
}
],
tableFilters: [
{ text: '2016-05-01', value: '2016-05-01' },
{ text: '2016-05-02', value: '2016-05-02' },
{ text: '2016-05-03', value: '2016-05-03' },
{ text: '2016-05-04', value: '2016-05-04' }
]
}
},
methods: {
filterHandler(value, row, column) {
const property = column['property']
return row === value
},
clearTableFilter() {
console.log('myTable', myTable);
myTable.clearFilter('date')
}
}
}
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html> unref(myTable) 多说一句，不清楚题主的水平，但从某种角度上说，vue3或者web开发还是需要开发者具有一定的能力的，以上问题其实如果去了解过web开发教程说着vue2/vue3/react 等库的文档，基本都会有相关说明 学习了，谢谢。 const myTable = ref()
// 后续要操作表格，操作myTable.value，如
myTable.value.clearFilter('date') 88868 发表于 2022-10-17 13:44
myTable.clearFilter('date') 这里不应该这样写
没到这一步，获取实例元素就获取不到。 本帖最后由 wc637700 于 2022-10-17 14:40 编辑
你的 ref="myTable" 放在了 <el-table-column> 标签上，应该放在 <el-table> 标签上，另外ref声明的，就要用 myTable.value.*** 去执行方法 官方示例：https://element-plus.gitee.io/zh-CN/component/table.html#%E7%AD%9B%E9%80%89
页:
[1]
2