点击table标签的空白处,取消table选中行的背景色.

qq_40927305

已于 2023-08-24 09:19:28 修改

阅读量294

点赞数

文章标签： javascript 前端开发语言

于 2023-08-23 15:25:21 首次发布

本文链接：https://blog.csdn.net/qq_40927305/article/details/132449007

版权

1.只是取消背景色,而不是取消行勾选,
2.另外如果行里按钮等组件,不能影响这些按钮原有功能
3.且不影响其他功能
在这里插入图片描述

思路1:
给table添加一个行点击事件.点击时会把行号存在一个全局变量里
在这里插入图片描述

2.在mounted方法里给用原生js通过class:hy-table__body-wrapper 获取表格的元素,并绑定点击事件:
当点击的是表格的数据行时,不触发让背景色消失的事件,如果点中的是表格的非数据行的空白部分,则触发让行背景色消失的事件.
(判断依据是点中行和空白时的e.target._prevClass值会不一样.)

mounted() {
    this.getSelectRwmc();
    this.getSelectYwlx();
    let param = new URLSearchParams(window.location.search);
    this.taskName = param.get('taskId');
    this.businessType = param.get('businessType');
    var taskName = param.get('taskId');
    if(taskName != null && taskName != ''&&taskName != undefined&&taskName != 'null'){
      this.firstQuery =false;
    }
    setTimeout(()=>{
      this.queryData();
    },200)
    var dom
    //开始给表格绑定事件
    var that = this;
    setTimeout(function (){
      that.$nextTick(()=>{
        // hy-table__body-wrapper
        dom = document.getElementsByClassName("hy-table__body-wrapper");
        while(dom==undefined||dom==null||dom.length==0){
          sleep(500);
          dom = document.getElementsByClassName("hy-table__body-wrapper");
        }
      
        console.log(dom);
        dom[0].onclick = (e)=>{
          if (e.target._prevClass == "hy-table__body-wrapper") {
            that.clearBackgroudColor();
          }else{

          }
        }
        console.log(dom);

      })
    },1000)

  },

在这里插入图片描述

至于清除背景色的方法:(也是用到了原生js获取选取,然后直接更改其classname属性)
(一开始是打算用行号去取,但有时会取失败,这时就用document.querySelectorAll(‘#myTable .el-table-tr.current-row,.hy-table-tr.current-row’) 获取选中行,因为.current-row这个class是选中行独有的)

 clearBackgroudColor(){
      var rowIndex = this.globalRowIndex;
      if (rowIndex != -1) {

        console.log(rowIndex);
        let doms=document.querySelectorAll('#myTable .el-table-tr.current-row,.hy-table-tr.current-row')
        // let doms2=document.querySelectorAll('.el-table__fixed-right .el-table-tr')

        console.log(doms);
        doms[0].className='normal hy-table-tr'
        // doms2[rowIndex].className='normal el-table-tr'





      }
    },