el-table-column鼠标移入显示tooltip的方法

在el-table中，我们可以使用el-table-column组件来定义表格的列。在el-table-column中，我们可以使用tooltip属性来显示气泡提示信息。tooltip属性可以是一个字符串，也可以是一个对象。如果tooltip属性是一个字符串，则表示气泡提示信息的内容。如果tooltip属性是一个对象，则可以设置气泡提示信息的内容、位置、触发方式等属性。

方法一：使用template包裹el-tooltip标签

<el-table :data="tableData">
  <el-table-column
    prop="name"
    label="姓名"
    width="180"
  >
    <template slot-scope="scope">
      <el-tooltip content="这是姓名" placement="top">
        <span>{{ scope.row.name }}</span>
      </el-tooltip>
    </template>
  </el-table-column>
  <el-table-column
    prop="age"
    label="年龄"
    width="180"
  >
    <template slot-scope="scope">
      <el-tooltip content="这是年龄" placement="top">
        <span>{{ scope.row.age }}</span>
      </el-tooltip>
    </template>
  </el-table-column>
</el-table>

方法二：给el-table-column添加title属性

<el-table :data="tableData">
  <el-table-column
    prop="name"
    label="姓名"
    width="180"
    title="这是姓名"
  >
  </el-table-column>
  <el-table-column
    prop="age"
    label="年龄"
    width="180"
    title="这是年龄"
  >
  </el-table-column>
</el-table>

总结

以上就是两种在el-table-column中使用tooltip的方法。这两种方法都可以实现鼠标移入列时显示气泡提示信息的功能。方法一使用template包裹el-tooltip标签，可以更加灵活地控制气泡提示信息的内容和样式。方法二给el-table-column添加title属性，更加简单方便。