美文网首页前端
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