vue+element 表单相关项目问题（四）——表头添加图标加提示

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

1.element表头添加图标加提示

1.1代码

这里我需要用到el-tooltip以及插槽slot="header"，具体代码如下：

  <el-table-column align="center" width="auto"  prop="profitAmount">
          <template slot="header">
            毛利(元)
            <el-tooltip effect="dark" placement="bottom">
              <i class="el-icon-warning-outline" />
              <div class="prompt" slot="content">消费金额-成本价=毛利</div>
            </el-tooltip>
          </template>
        </el-table-column>

1.2 解释

在代码里effect控制提示文字的背景颜色，主要有两种颜色，分别是dark(黑色)和light(白色)； placement控制展示的效果，这里用到是bottom,也就是在表头下展示。以下为[官方](组件 | Element)解释：

使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

1.3效果

2渲染数组中的数组

2.1 代码

 <el-table-column
        prop="config"
        label="月目标完成率"
        width="auto"
        align="center"
      >
        <!-- 当基于销售额时，有图标，有单独毛利 -->
        <template slot-scope="scope">
          <div class="config">
            <div class="config-left">
              <span v-for="(item, index) in scope.row.config.list" :key="index">
                {{ item.start }}%≤完成率＜{{ item.end }}% <br/>
              </span>
            </div>
            <div class="config-right">
              <el-tooltip
                v-if="scope.row.commissionType == 2"
                effect="dark"
                placement="bottom"
              >
                <i
                  class="el-icon-warning-outline"
                  style="margin-left: 10px; color: #0099ff"
                />
                <div class="prompt" slot="content">
                  <span>
                    单个客户毛利率＜{{ scope.row.config.commissionRate }}%<br/>
                    按该客户提成毛利的{{ scope.row.config.rate }}%计算
                  </span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
      </el-table-column>

2.2 解释

由于element的逻辑，我们在用 prop时，相当于官方已经将当前数组的一级遍历了一遍，所以上文直接用了 prop="config"，考虑到数组里面还有数组，这时我们就需要用插槽加v-for遍历v-for="(item, index) in scope.row.config.list"，scope.row相当于当前行的数据，然后从当前行遍历里面的list 数组，然后找到list数组里面的字段,就可以用{{item.字段}}进行渲染了。

2.3 效果

至此大功告成！ 由于是新手，最近遇到了很多棘手的问题，我将持续在掘金上更新！