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

Question

我正在处理 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> 中？

Answer 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>。

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

Vue + Element UI: How to use a dynamic tooltip in a table

javascript

vue.js

element-ui