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

小灰灰 2022-01-14 12:25 1071阅读 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 条评论，1071人围观）

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

相关阅读

相关 iview table render集成switch开关

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

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

相关 iview在table中添加图片

我们知道iview的table封装的太好，如果只是展示数据简直不要太简单，但是比如合并单元格就很麻烦，而我要做的是在table中添加图片建议大家先看一下这个:[https

柔光的暖阳◎/ 2022年05月16日 08:35/ 0 赞/ 251 阅读

相关 layui给table表格中加入数据渲染表格

//id为 tableIns的表格数据为rows tableIns.reload({ data: }); 或者

古城微笑少年丶/ 2022年05月12日 11:50/ 0 赞/ 343 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关在bootstrap table中使用Tooltip

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

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

相关 iview,用render函数渲染

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

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