element-ui 和iview的table列超出部分省略加悬浮提示

1.element
element-ui很简单,只需要在每一列加上:show-overflow-tooltip="true"就可以了



2.iview
iview使用render函数

{
    title: '创建人',
    key: 'creatorName',
    width: '60',
    align: 'center',
    render: (h, params) => {
      return h('div', [
         h('span', {
             style: {
                 display: 'inline-block',
                 width: '100%',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap'
             },
             domProps: {
                 title: params.row.creatorName
             }
         }, params.row.creatorName)
     ]);
         
   }
}

冒泡的话,用js阻止一下就好了。

on: {
    click: (e) => {
        e.stopPropagation();
        this.removeItemContent(params.row.id);
    }
}

你可能感兴趣的:(element-ui 和iview的table列超出部分省略加悬浮提示)