前端

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

2018-07-31  本文已影响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);
    }
}
上一篇 下一篇

猜你喜欢

热点阅读