table列内容超出显示省略号

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

1. element ui

   element表格中在列标签中设置属性show-overflow-tooltip值为true

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

2.iview

iview在列定义中使用render函数调整表格行样式

{
   title: '报警信息',
   key: 'alarmInfo',
   render: (h, params) => {
       return h('div', [
           h('span', {
               style: {
                   display: 'block',
                   width: '100%',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   whiteSpace: 'nowrap'
               },
               domProps: {
                   title: params.row.alarmInfo
               }
           }, params.row.alarmInfo),

       ])
   }
}

冒泡的话,用js阻止一下

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