ivew 中 table 如何优雅的放入Tooltip

最新推荐文章于 2024-11-25 21:30:00 发布

原创最新推荐文章于 2024-11-25 21:30:00 发布 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#iview #Tooltip

iview 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍如何在iView框架的Table组件中实现鼠标悬停显示详细信息的Tooltip效果，通过在render函数中使用多个'h'元素进行布局，展示了如何自定义Tooltip的内容，包括失信行为、处罚结果和有效期等关键信息。

在iview 的table 中当鼠标放在，表格的文字上时，需展示相对应的说明效果如下

需要展示成上面内容，直接上代码

我们写在render 函数里，之所以写很多个“h” 是用来换行用的，具体内容可以查找iview 官网

render: (h, params) => {              
    return h('Tooltip', {
        props: { placement: 'top' }
     }, [
            params.row.name_, //表格中的数据
            h('div', {
               slot: 'content', 
               style: { 
                        whiteSpace: 'normal', 
                        wordBreak: 'break-all' 
                 }
            },'失信行为：'), //鼠标放上去显示的内容即气泡显示内容
            h('div', {
               slot: 'content', 
               style: { 
                        whiteSpace: 'normal', 
                        wordBreak: 'break-all' 
                      }
               },params.row.ll_behavior),
            h('div', {
               slot: 'content', 
               style: { 
                        whiteSpace: 'normal', 
                        wordBreak: 'break-all' 
                      }
            },'处罚结果：'),
            h('div', {
               slot: 'content', 
               style: { 
                        whiteSpace: 'normal', 
                        wordBreak: 'break-all' 
                      }
            },params.row.result_),
            h('span', {
               slot: 'content', 
               style: { 
                        whiteSpace: 'normal', 
                        wordBreak: 'break-all' 
                      }
            },'处罚有效期：'),
            h('span', {
               slot: 'content', 
               style: {
                       whiteSpace: 'normal', 
                       wordBreak: 'break-all' 
                      }
               },params.row.validity_)
            ])
                        
                    }