iveiw table 渲染表头

最新推荐文章于 2024-01-23 09:25:51 发布

花儿开富贵花

最新推荐文章于 2024-01-23 09:25:51 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43843679/article/details/111665507

博客主要提及了两项内容，一是表头加提示并展示了效果图，二是排序相关内容，整体围绕表格操作展开。

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

一、表头加提示

将表头columns.map
            item.renderHeader = h => {
              return h(
                'Tooltip',
                {
                  props: {
                    placement: 'top',
                    theme: 'light',
                    transfer: true,
                    maxWidth: 300,
                    content:
                      '注意：提示内容',
                  },
                },
                [
                  h(
                    'div',
                    {
                      style: {
                        cursor: 'pointer',
                        height: '100%',
                        width: '100%',
                        display: 'flex',
                        'align-items': 'center',
                        'justify-content': 'center',
                      },
                    },
                    [item.title, h('span', { class: 'tip-img' })]
                  ),
                ]
              );
            };

  /deep/ .ivu-table-cell {
    .tip-img {
      display: inline-block;
      vertical-align: top;
      margin-left: 6px;
      width: 15px;
      height: 15px;
      background: url('../../../assets/images/passenger-flow/tip.png') no-repeat;
      background-size: contain;
    }
    .tip {
      white-space: normal;
    }
  }