iview表格文字超出后使用省略号

      
       {
          title: 'title',
          key: 'key',
          align: 'center',
          ellipsis: true,                      //超出长度时用...显示
          width: 150,
          render: (h, params) => {
            return h('Tooltip', {
              props: {
                placement: 'top'
              }
            }, [
                params.row.key,
                h('span', {
                  slot: 'content',             //slot属性
                  style: {
                    whiteSpace: 'normal',
                    wordBreak: 'break-all'
                  }
                }, params.row.key)
              ])
          }
        }
 

第二种：

                       {
                        title: '姓名',
                        key: 'name',
                        ellipsis: true,
                        className: 'box-pack-center',
                        align:'center',
                        minWidth: 100,
                        render: (h, params) => {
                            let tools = [];
                            tools.push(h('a',{
                                style:{
                                    display:'inline-block',
                                    width: '100%',
                                    textIndent:'0px',
                                    overflow: 'hidden', //超出的文本隐藏
                                    textOverflow: 'ellipsis', //溢出用省略号显示
                                    whiteSpace: 'nowrap', //溢出不换行
                                },
                                attrs: {
                                    title: params.row.name
                                },
                            },params.row.name));
                            return h('div',{style:{width:'100%'}}, tools);
                        }
                    }

 

原文链接    https://blog.csdn.net/weixin_42675298/article/details/90897198