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

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

• javascript
• vue.js
• element-ui

Share Improve this question Follow edited Feb 10, 2021 at 15:19 oguz ismail 51k1616 gold badges6060 silver badges7979 bronze badges asked Feb 9, 2021 at 17:32 Stevan NajeebStevan Najeeb 10933 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.