vue 点击表头获取对应的元素

在 Vue 中，可以使用 `@click` 或 `v-on:click` 来绑定点击事件，并且可以通过 `$event` 参数来获取触发点击事件的元素。对于表头的点击事件，可以通过绑定到表头元素上来实现。在处理点击事件时，可以通过 `$event.target` 来获取触发点击事件的 DOM 元素，然后再根据元素的一些属性来判断点击的是哪个表头。

例如，假设有一个表格组件，表格中有一个表头行和多个数据行，每个表头单元格都有一个 `data-key` 属性，用于表示对应的数据列。可以在表头单元格上绑定点击事件，然后在点击事件处理函数中通过 `event.target` 获取到触发点击事件的单元格元素，再从该元素中读取 `data-key` 属性，以此来确定点击的是哪一列。示例代码如下：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :data-key="column.key" @click="handleHeaderClick">{{ column.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <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(event) {
      const key = event.target.getAttribute('data-key');
      console.log('Clicked column:', key);
    }
  }
}
</script>

在上面的示例中，表头单元格通过 `:data-key` 绑定了一个 `key` 属性，用于表示对应的数据列。在点击表头单元格时，`handleHeaderClick` 方法会被触发，并传入一个事件对象 `event`。通过访问 `event.target` 属性，就可以获取到触发点击事件的 DOM 元素，即表头单元格元素。然后再通过 `getAttribute` 方法获取该元素的 `data-key` 属性值，以此来确定点击的是哪一列。