vue 点击表头获取对应dom
时间: 2023-08-19 17:04:04 浏览: 48
在Vue中,可以通过`ref`来为DOM元素添加引用,然后在Vue实例中通过`this.$refs`来访问这些DOM元素。对于表格中的表头,可以为每个表头单元格添加一个`ref`,然后在获取点击事件后,再通过`this.$refs`来获取对应的DOM元素。示例代码如下:
```html
<template>
<table>
<thead>
<tr>
<th v-for="(column, index) in columns" :ref="'header-' + index" @click="handleHeaderClick(column.key)">{{ column.label }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.col1 }}</td>
<td>{{ item.col2 }}</td>
<td>{{ item.col3 }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
columns: [
{ key: 'col1', label: 'Column 1' },
{ key: 'col2', label: 'Column 2' },
{ key: 'col3', label: 'Column 3' },
],
items: [
{ col1: '1-1', col2: '1-2', col3: '1-3' },
{ col1: '2-1', col2: '2-2', col3: '2-3' },
{ col1: '3-1', col2: '3-2', col3: '3-3' },
]
}
},
methods: {
handleHeaderClick(key) {
const header = this.$refs['header-' + this.columns.findIndex(c => c.key === key)][0];
console.log('Clicked column:', header);
}
}
}
</script>
```
在上面的示例中,每个表头单元格都添加了一个`ref`,例如第一个表头单元格的`ref`为`header-0`。在点击表头单元格时,`handleHeaderClick`方法会被触发,并传入对应的列`key`。首先通过`findIndex`方法找到对应列的索引,然后通过`this.$refs`来获取对应的DOM元素,例如第一个表头单元格的DOM元素可以通过`this.$refs['header-0'][0]`来获取。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)