el-table-column中使用ref

在Element UI的`el-table-column`组件中，`ref`是一个用于在Vue实例中创建引用的对象，你可以通过这个引用来访问和操作表格列的相关DOM元素。当你想要在表头、单元格或其他部分获取特定列的元素以便进一步操作时，可以使用`ref`。

假设你想在一个`el-table-column`中设置一个自定义的表头按钮，你可以这样做：

<template>
  <el-table-column label="Name" ref="customHeaderColumn">
    <template slot-scope="scope">
      <!-- 普通内容 -->
      <span>{{ scope.row.name }}</span>
      
      <!-- 表头按钮 -->
      <el-button @click="showCustomAction(scope.$index)" type="text">Actions</el-button>
    </template>
  </el-table-column>
</template>

<script>
export default {
  methods: {
    showCustomAction(columnIndex) {
      const headerCell = this.$refs.customHeaderColumn.firstChild; // 获取表头单元格
      // 现在你可以对headerCell进行操作，比如添加事件监听或者修改样式
      headerCell.addEventListener('mouseover', () => {
        // ...
      });
    },
  },
};
</script>

在这个例子中，`$index`是列的索引，你可以用它来识别特定列。`firstChild`属性获取了表头单元格的第一个子节点，通常这是按钮所在的元素。