element-ui table 给表头添加icon图标，以及鼠标滑过时显示提示内容

最新推荐文章于 2025-04-16 10:00:20 发布

聰籽

最新推荐文章于 2025-04-16 10:00:20 发布

阅读量4.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： element

本文链接：https://blog.csdn.net/weixin_44446223/article/details/106838922

element 专栏收录该内容

5 篇文章

订阅专栏

本文详细解释了处警率和误报率的计算公式，处警率涉及违规属实、设备误报和已忽略预警的总数，以及未处理预警的影响；误报率则区分不同超速类型，提供具体计算逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

  <el-table-column prop="handleRatio"   label="处警率（%）" :render-header="renderHeader" width="170">
  methods: {
 	      renderHeader(h, { column }) {
		      const serviceContent= [
		        h(
		          "div",
		          {
		            slot: "content",
		            style: "margin-bottom:5px"
		          },
		          "误报率："
		        ),
		        h(
		          "div",
		          {
		            slot: "content"
		          },
		          "1、设备误报总数-一级超速误报-二级超速误报-三级超速误报）/（违规属实总数＋设备误报总数＋已忽略总数）*100%，"
		        ),
		        h(
		          "div",
		          {
		            slot: "content"
		          },
		          "2、若未选择超速类型，公式为：设备误报总数/（违规属实总数＋设备误报总数＋已忽略总数）*100%"
		        ),
		      ];
		      const paymentContent= [h(
		        "div",
		        {
		          slot: "content"
		        },
		        "处警率："
		      ), h(
		          "div",
		          {
		            slot: "content"
		          },
		          "1、违规属实总数＋设备误报总数＋已忽略总数/（违规属实总数＋设备误报总数+已忽略总数＋未处理预警总数）*100%"
		        ),];
		      return h("div", [
		        h("span", column.label),
		        h(
		          "el-tooltip",
		          {
		            props: {
		              placement: "bottom"
		            }
		          },
		          [
		            column.label != "误报率（%）" ?paymentContent :  serviceContent,
		            h("i", {
		              class: "el-icon-warning-outline",
		              style: "color:orange;margin-left:5px;"
		            })
		          ]
		        )
		      ]);
    },
 }