Vue + Element UI：如何在表格中使用动态工具提示

【问题标题】：Vue + Element UI: How to use a dynamic tooltip in a tableVue + Element UI：如何在表格中使用动态工具提示
【发布时间】：2021-02-09 17:32:08
【问题描述】：

我正在处理 Element UI 表，我正在尝试为我的一个列添加工具提示，但是我不知道如何检索道具以在工具提示中显示它。

<el-table-column
  label="Service Lines / MSDRG"
  prop="code"
  sortable
>
  <el-tooltip effect="dark" placement="top-start" content="some content here">
    {{code}}
  </el-tooltip>
</el-table-column>

有没有办法让code 值显示在<el-tooltip> 中？

【问题讨论】：

标签： javascript vue.js element-ui

【解决方案1】：

使用custom column template 访问单元格的槽范围：

<el-table-column label="Service Lines / MSDRG" prop="code" sortable>

  <template slot-scope="slotData">
    <el-tooltip effect="dark" placement="top-start" content="some content here">
      <span>{{ slotData.row.code }}</span>
    </el-tooltip>
  </template>

</el-table-column>

<template> 标签通过slot-scope 属性拉入作用域槽数据，您可以随意命名数据。这里我将其命名为slotData，因此slotData.row 指的是该行的数据。因此，您可以通过slotData.row.code 访问code 字段。

请务必将值包含在某个标记中，例如上例中的<span>。

【讨论】：