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

水深无声 2023-07-21 11:22 6阅读 0赞

{
              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][https_blog.csdn.net_weixin_42675298_article_details_90897198]

[https_blog.csdn.net_weixin_42675298_article_details_90897198]: https://blog.csdn.net/weixin_42675298/article/details/90897198