iview的table某个单元格内容设置鼠标onMouseOver事件 + table表格一直在自动向右滚动，都移出屏幕了

最新推荐文章于 2024-03-04 14:11:18 发布

原创最新推荐文章于 2024-03-04 14:11:18 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iview #table #mousehover

本文探讨了解决前端Table组件自动滚动的问题，通过设定父级容器高度来避免无限滚动。同时，深入解析了如何优雅地处理后台返回的权限数据，使用Vue.js将数字权限转换为可视化的权限图标，提升了用户体验。

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;
}