美文网首页前端
element-ui 和iview的table列超出部分省略加悬

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

作者: 若年 | 来源:发表于2018-07-31 10:51 被阅读1101次

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

<el-table-column :show-overflow-tooltip="true">
</el-table-column>

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列超出部分省略加悬

    本文链接:https://www.haomeiwen.com/subject/yhmcvftx.html