el-table学习

最新推荐文章于 2023-11-21 09:17:04 发布

原创最新推荐文章于 2023-11-21 09:17:04 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了如何在ElementUI的el-table中使用el-tooltip为表头添加提示信息，以及处理全周期状态的显示，包括ab实验和全量阶段的区分。

1.el-table中表头添加提示

代码如下：

<el-table-column label="全周期" prop="whole_period" align="center" min-width="100px" sortable>
  <template slot="header">
    <el-tooltip class="item" effect="dark" placement="top">
      <div slot="content">ab实验:prd宣讲-实验完成<br>全量:prd宣讲-上线</div>
      <span>全周期<i class="el-icon-question" /></span>
    </el-tooltip>
  </template>
  <template slot-scope="scope">
    <div v-if="scope.row.whole_period == null ">无</div>
    <div v-else>{{ scope.row.whole_period }}</div>
  </template>
</el-table-column>