iview在Table表格中渲染Tooltip文字提示，使用render实现

小灰灰 2022-01-14 12:25 1092阅读 0赞

{
              title: '发送范围',
              key: 'sendRangeName',
              minWidth: 100,
              align: 'center',
              className: 'noticeConciseContent',
              render: (h, params) => {
                let texts = params.row.sendRangeName
                if (params.row.sendRangeName != null) {
                  if (params.row.sendRangeName.length > 9) {
                    texts = params.row.sendRangeName.slice(0, 9) + '...' // 进行数字截取
                  } else {
                    texts = params.row.sendRangeName
                  }
                }
                return h('div', [
                  h('Tooltip', {
                    props: {
                      placement: 'top',
                      transfer: true
                    }
                  }, [texts, h('span', {
                    slot: 'content',
                    style: {
                      whiteSpace: 'normal'
                    }
                  }, params.row.sendRangeName)
                  ])
                ])
              }
            },

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20220114/134021f39a97451ea1c569e59680a413.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1092人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview表格文字超出后使用省略号

{ title: 'title', key: 'key', align: 'cent

水深无声/ 2023年07月21日 11:22/ 0 赞/ 7 阅读

相关 iview—Table表格render 渲染

1.序号 2.if判断、a标签 3.if判断、Input输入 4.renderHeader自定义列头的点击事件、render的Input点击事件

Dear 丶/ 2023年06月04日 02:53/ 0 赞/ 52 阅读

相关 iview table render集成switch开关

iview table render集成switch开关今天想要分享的是iview table render集成switch开关修改table表格的值，看文档

曾经终败给现在/ 2022年06月02日 03:50/ 0 赞/ 417 阅读

相关 iview的table表格中使用render函数进行单元格格式化

一、统一样式 <i-table size="large" :columns="columns1" :data="data1"></i-table> colu

骑猪看日落/ 2022年02月19日 02:34/ 0 赞/ 638 阅读

相关 Iview table 中Tooltip 折行显示效果

{ title: '服务状态监控', slot: 'date7', align: 'center

﹏ヽ暗。殇╰゛Y/ 2022年02月15日 10:23/ 0 赞/ 301 阅读

相关 iview在Table表格中渲染Tooltip文字提示，使用render实现

{ title: '发送范围', key: 'sendRangeName', min

小灰灰/ 2022年01月14日 12:25/ 0 赞/ 1093 阅读

相关 iView中table表格中使用select选框和方法

在ivew中表格中使用select选框方法 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

迷南。/ 2021年11月10日 18:32/ 0 赞/ 549 阅读

相关 iview表格Table表头动态化实现

业务逻辑：根据日期，时间筛选跨度固定为3个月，获取数据，表格动态按月份展示，看图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

朴灿烈づ我的快乐病毒、/ 2021年09月17日 03:02/ 0 赞/ 1524 阅读

相关在bootstrap table中使用Tooltip

//偏好主题 function preferenceFormatter(value, row, index) { var nameStri

Love The Way You Lie/ 2021年09月12日 04:50/ 0 赞/ 787 阅读

相关 iview,用render函数渲染

<Table border :columns="discountColumns" :data="discountData.rows"></Table> disc...

红太狼/ 2021年05月02日 14:47/ 0 赞/ 572 阅读