elementui鼠标放置表格列 显示悬浮窗

Element UI 是一个基于 Vue 2.0 的桌面端组件库，它提供了丰富的组件来帮助开发者快速构建高质量的用户界面。在 Element UI 中，如果你想要在鼠标放置在表格列上的时候显示一个悬浮窗（Tooltip），你可以使用 Element UI 的 Tooltip 组件来实现这个功能。

实现方式大致如下：

1. 引入 Tooltip 组件：首先确保在你的项目中已经正确引入了 Element UI，并且包含了 Tooltip 组件。

2. 在表格的模板中使用 v-tooltip 指令：在你希望显示悬浮窗的 <el-table-column> 标签中，添加 v-tooltip 指令，并绑定一个数据对象来定义悬浮窗的内容。

示例代码如下：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-tooltip :content="scope.row.info" effect="dark" placement="top">
          <el-button type="text" @click="handleClick(scope.row)">查看详情</el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        info: '更多详情信息'
      }, /* 其他数据项 */],
    }
  },
  methods: {
    handleClick(row) {
      // 处理点击事件，例如弹出详情对话框
    }
  }
}
</script>

在这个例子中，我们创建了一个按钮，并且将其包裹在 el-tooltip 组件内。当用户鼠标悬停在按钮上时，会显示一个悬浮窗，其中内容是该行数据的 `info` 字段。