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

Question

I am working on Element UI tables and I am trying to include a tooltip for one of my columns, however I can not figure out how to retrieve the prop to display it within the tooltip.

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

Is there a way to get the code value to display within the <el-tooltip>?

Dan · Accepted Answer · 2021-02-09 18:00:15Z

4

Use a custom column template to access the slot scope of the cell:

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

The <template> tag pulls in the scoped slot data through the slot-scope attribute, and you can name the data whatever you like. Here I've named it slotData, and so slotData.row refers to the data for the row. Therefore, you can access the code field through slotData.row.code.

Be sure to wrap the value in some tag, like <span> in the example above.

answered Feb 9, 2021 at 18:00

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related