在element中el-table进行相应的改造，能满足列表中的相应数据后面添加对应的单位如：%，头部标题能够通过对应的el-tooltip进行相应的解释，原型如下图所示：

目标一：实现列表中数字后面添加%；

目标二：实现头部tooltip显示，进行相应解释;

实现方法：

通过vue 插槽之 v-slot 与 slot-scope进行解决；

简单解释一下：

• slot 插槽

是 Vue 中的一个特殊特性，它的作用是：在指定位置开辟一个空间，给未来的元素使用给，这里所谓的未来的元素就是组件的内容，但是 slot 已被废弃了，但是也是可以用的。

• 作用域插槽（slot-scope）

作用域插槽其实就是一个带有数据的插槽，我们知道组件中的数据只能在对应的组件模板中使用，在其他地方无法获取，那么要想在其他地方获取到该数据，就可以通过使用 slot-scope 来获取，但是 slot-scope 已被废弃。

slot-scope 用来绑定的是子组件的数据，在组件模板中书写所需 slot 插槽，并将当前组件的数据通过 v-bind 绑定在 slot 标签上。

 注意：

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：

<current-user>

    <template v-slot:default="slotProps">

       {{ slotProps.user.firstName }}

   </template>

   <template v-slot:other="otherSlotProps">

      ...

    </template>

所以咱们上面的实现相对就简单了：如下

 <el-table-column label="业务收益率E" align="center" prop="incomeRate" >

        <template slot-scope="scope">

          {{scope.row.incomeRate}}%

        </template>

        <template v-slot:header>

        <el-tooltip content="业务收益率E=C/B " placement="top-start" effect="light">

          <i class="el-icon-warning-outline"></i>

        </el-tooltip>

        <span>业务收益率E(%)</span>

        </template>

      </el-table-column>