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

1 Answer 1

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.