【问题标题】: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 值显示在&lt;el-tooltip&gt; 中?

【问题讨论】:

    标签: 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>
    

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

    请务必将值包含在某个标记中,例如上例中的&lt;span&gt;

    【讨论】:

      猜你喜欢
      • 2021-11-05
      • 2019-06-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-12-12
      • 2021-07-04
      • 1970-01-01
      • 2019-09-05
      相关资源
      最近更新 更多