iview在Table表格中渲染,Tooltip和render函数实现鼠标悬停气泡提示，

项目场景：

1. 使用iview组件库中的table表格，实现鼠标悬停时的气泡框提示。
2. 使用到了tooltip属性和render函数，他们都是column属性。（column是列描述数据对象，是columns中的一项）。
3. tooltip开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容；
   render自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引；

实现代码：

templete

 <Table ref="table" :max-height="tableHeight" stripe :columns="columns1" :data="data1" :border="true">

js

columns1: [
                    {
                        title: '用户名称',
                        key: 'name',
                        render: (h, params) => {
                            let texts = params.row.name
                            if (params.row.name != null) {
                                if (params.row.time.length > 20) {
                                    texts = params.row.name.substring(0, 20) + '...' // 进行数字截取或slice截取超过长度时以...表示
                                } else {
                                    texts = params.row.name
                                }
                            }
                            return h('Tooltip', {
                                props: {
                                    placement: 'bottom-start'
                                },
                            }, [texts,
                                h('span', {
                                    slot: 'content',
                                    style: {
                                        whiteSpace: 'normal',
                                        wordBreak: 'break-all'
                                    }
                                }, params.row.name)
                            ])
                        }
                    },
         ]

实现效果：