在el-table表头上添加icon与事件

renderHeader(h, { column }) {
        const serviceContent= [
          h(
            "img",
            {
              slot: "content",
              style: "width:100px;height:100px",
              attrs:{
                src:'https://xxx/logo2.png',
              }
            },
          ),
          h(
            "div",
            {
              slot: "content"
            },
            "1、分成数值百分比:"
          ),
          h(
            "div",
            {
              slot: "content"
            },
            "商家结算服务费百分比 = 券后价 * 销量 * 服务费比例(商家)"
          ),
          h(
            "div",
            {
              slot: "content"
            },
            "商家结算服务费固定值 = 销量 * 服务费固定值(商家)"
          ),
          h(
            "div",
            {
              slot: "content",
              style: "margin-bottom:5px"
            },
            "服务费收入(流量主) = 商家结算服务费 * 分成数值百分比"
          ),
          h(
            "div",
            {
              slot: "content"
            },
            "2、分成数值固定值:"
          ),
          h(
            "div",
            {
              slot: "content"
            },
            "服务费收入(流量主) = 销量 * 分成数值固定值"
          )
        ]
        const paymentContent= h(
          "div",
          {
            slot: "content"
          },
          "货款 = 券后价 * 销量"
        );
        const popoverContent= [
          h(
            "img",
            {
              style: "width:100px;height:100px",
              attrs:{
                src:"http://xxx/5b03e13a59ba4b04afd49f1c9f32f2ec.jpg"              }
            },
          ),
          h(
            "div",
            {
              style: "color:red",
            },
            "1、分成数值百分比:"
          ),
          h(
            "div",
            "商家结算服务费百分比 = 券后价 * 销量 * 服务费比例(商家)"
          )];
          return h("div", [
            h("span", column.label),
            h(
              "el-tooltip",
              {
                props: {
                  placement: "bottom"
                }
              },
              [
                column.label != "货款" ? serviceContent: paymentContent,
                h("i", {
                  class: "el-icon-warning-outline",
                  style: "color:orange;margin-left:5px;"
                })
              ]
            )]
          )
        if(this.type===2){
          return h("div",[
            h("span", column.label),
            h(
              "el-popover",
              {
                props: {
                  trigger:'hover',
                  placement: "bottom",
                }
              },
              [
                column.label != "货款" ? popoverContent: paymentContent,
                h("i", {
                  slot: "reference",
                  class: "el-icon-warning-outline",
                  style: "color:orange;margin-left:5px;"
                })
              ]
            )
          ])
        }
      },

文章来源网上 我添加了一些想法 不妥删

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。