elementui鼠标放置表头 显示悬浮窗

Element UI是一个基于Vue.js的组件库，它提供了一套丰富的UI组件，用于快速开发桌面端的web应用。在Element UI中，可以通过添加特定的属性来实现鼠标放置表头时显示悬浮窗的效果。一个常用的方法是使用`el-table-column`组件的`show-overflow-tooltip`属性，该属性用于设置是否在内容超出时显示悬浮提示框。当设置为`true`时，如果列宽不足以容纳内容，鼠标放置在该列上就会显示一个悬浮窗，展示完整的内容。

具体实现方式如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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 prop="address" label="地址" show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        // ...更多数据
      }]
    }
  }
}
</script>

在上面的示例中，`el-table-column`的`prop`属性指定了数据对象中的属性名称，`label`属性设置了列的显示名称，而`show-overflow-tooltip`属性确保了当地址列的内容超出列宽时，会显示一个悬浮窗来显示完整的内容。