CODEWITHSUNDEEP
javascriptvue.jselement-ui
Stevan Najeeb
Stevan Najeeb

Reputation: 109

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

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

Upvotes: 1

Views: 6752

Answers (1)

Dan
Dan

Reputation: 63059

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.

Upvotes: 4

Related Questions