实习随笔【iviews实现列表项太长hover显示全部】

        在实际开发中，我们使用列表展示数据时，有时单个列表项长度过长不能完全显示，需要实现多余部分展示为省略号，hover再展示完整数据

实现效果：

方式一：借助 table 的 render函数 + Tooltip组件

// 仅展示一项
{
            title: 'Address',
            key: 'address',
            render: (h, params) => {
              return h('Tooltip', {
                props: {
                  content: params.row.address,
                  placement: "top",
                  transfer: true, // 使得 Tooltip 能够脱离局部滚动的限制
                  maxWidth: 400 // 设置一个足够的最大宽度
                }
              }, [
                h('div', {
                  style: {
                    maxWidth: '200px', // 控制最大宽度
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }
                }, params.row.address)
              ]);
            }
          },

方式二：使用组件自带属性 tooltip：true

{
    title: 'Address',
    key: 'address',
    tooltip:true
},