1.因未设置 table外层父级容器的高度,导致table表格一直在自动计算宽高,一直向右滚动 2.后台接口返回的数据格式是 1,2,3,4,5 (不同的用户登录拥有的权限不一样) { title: 'Authorization', key: 'authorization', render: (h, params) => { let className1 = '' let className2 = '' let className3 = '' let className4 = '' let className5 = '' let newArr = []; let arr = []; let str = ''; if (params.row.authorization!=null) { arr = params.row.authorization.split(',') if(arr.length>0){ arr.forEach((item,index)=>{ if(item == '1'){ str='a' newArr.push(str) }else if(item == '2'){ str='b' newArr.push(str) }else if(item == '3'){ str='c' newArr.push(str) }else if(item == '4'){ str='d' newArr.push(str) }else if(item == '5'){ str='e' newArr.push(str) } }) if(newArr[0]!=undefined){ className1 = 'viewDetail' } if(newArr[1]!=undefined){ className2 = 'viewDetail' } if(newArr[2]!=undefined){ className3 = 'viewDetail' } if(newArr[3]!=undefined){ className4 = 'viewDetail' } if(newArr[4]!=undefined){ className5 = 'viewDetail' } } } return h('Tooltip', { props: {placement: 'right'} }, ['View',[ h('p', {slot: 'content', class:className1, style: {whiteSpace: 'nowrap', wordBreak: 'break-all'}}, newArr[0]), h('p', {slot: 'content', class:className2, style: {whiteSpace: 'nowrap', wordBreak: 'break-all'}}, newArr[1]), h('p', {slot: 'content', class:className3, style: {whiteSpace: 'nowrap', wordBreak: 'break-all'}}, newArr[2]), h('p', {slot: 'content', class:className4, style: {whiteSpace: 'nowrap', wordBreak: 'break-all'}}, newArr[3]), h('p', {slot: 'content', class:className5, style: {whiteSpace: 'nowrap', wordBreak: 'break-all'}}, newArr[4]) ] ]) } }
css样式
.ivu-tooltip-rel { position: relative; color: #007A93; //单元格你的文字颜色 &:hover{ color: #004355; } } .ivu-tooltip-inner { max-width: 800px; min-height: 34px; padding: 8px 12px; color: #262626; text-align: left; text-decoration: none; background-color: #ffffff; border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); white-space: nowrap; font-size: 0.7rem; P{ white-space: nowrap; } } .ivu-tooltip-popper[x-placement^=right] .ivu-tooltip-arrow { left: 3px; border-width: 5px 5px 5px 0; border-right-color: #ffffff; } .viewDetail:before{ //在文字前边加一个对勾的图片 position: relative; display: inline-block; right: 5px; content: url("../../../static/imgs/duigou.svg"); vertical-align: middle; }