element table表头信息提示功能的实现

397 阅读1分钟

image.png
鼠标悬浮在table表头上方会出现提示文字,实现效果如上图
技术实现: 可以运用table的自定义表头+tooltip属性来实现

            <!-- 自定义表头 -->
            <template slot="header">
              <span>进件成功数量</span>
              <!-- 提示文字的设置 -->
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="该渠道表单进件成功的数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <!--表格内容 -->
            <template slot-scope="{ row }">
              <span>{{ row.incomingPartsNumber }}</span>
            </template>
          </el-table-column>