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

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

 

 

iview4版本的Table组件中,如果你想实现在单行数据上添加鼠标移入移出事件,你可以通过`hover-class`属性或者`on-row-contextmenu`和`on-mouseenter`、`on-mouseleave`自定义事件来达到这个效果。 `hover-class`是一个字符串,当鼠标悬停在指定行上时,该类会被添加到行元素上。例如: ```html <template> <Table :data="tableData" hover-class="row-hover"> <TableColumn field="name" title="姓名"></TableColumn> <!-- 其他列... --> </Table> </template> <style scoped> .row-hover { background-color: rgba(0, 0, 0, 0.1); } </style> <script> export default { data() { return { tableData: [ // 数据... ] }; } }; </script> ``` 如果你需要更复杂的交互,如点击后显示详细信息,可以结合`on-row-contextmenu`事件处理程序,并在其中设置`on-mouseenter`和`on-mouseleave`事件,如下所示: ```html <template> <Table :data="tableData" @row-contextmenu="handleContextMenu"> <!-- ... --> </Table> </template> <script> methods: { handleContextMenu(row) { const showDetail = () => { // 显示详细信息... this.$emit('row-enter', row); // 触发鼠标进入事件 }; // 当鼠标离开时隐藏细节信息 const hideDetail = () => { this.$emit('row-leave'); // 触发鼠标离开事件 }; // 点击行时触发showDetail函数 document.addEventListener('click', hideDetail); // 当鼠标进入行时开始监听鼠标离开 this.$emit('row-enter', row); } } // ...其他代码 </script> ``` 记得在适当的地方移除`document.addEventListener('click', hideDetail)`以解除鼠标离开的监听。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值