跨板块禁止选择

需求 是有好几个板块 里面各有自己的表格数据，当选择一个板块的表格数据，再点开其他板块禁止他们的表格选择

        <el-table-column
          v-if="!isSp"
          type="selection"
          width="35"
          :selectable='checkboxInit'
        >
        </el-table-column>

             checkboxInit(row,index){             //这个方法只能禁止每一行，看了方法并没有找到表头的全选
    　　if (!this.canSelect)//这个判断根据你的情况而定
    　　　　return 0;//不可勾选 
    　　else
    　　　　return 1;//可勾选
    　　}

如代码 在table组件里面 定义一个初始值 canSelect 为true ，选择的事件外发出一个changeSelcount事件，把当前选择的公司id传出去，页面接收

      changeSelcount(count,id){
        if(count >0){
          this.companyId=id
        }else{
          this.companyId=0
        }
      }

把公司id在传回组件

:canSelect="companyId==0 || companyId== id"    (id就是这个页面中赋值的公司id, 判断没有选择 或者选择的是他自己)

在table组件里 给table定义一个动态的id (this.tableId = Math.random()),在watch里监测 canSeect

      canSelect()
      {
        if( document.getElementById(this.tableId)==null ||  document.getElementById(this.tableId).getElementsByClassName("el-checkbox").length==0)
          return
        if(!this.canSelect)
        {

          document.getElementById(this.tableId).getElementsByClassName("el-checkbox")[0].style.display = "none";
        }
        else
        {
          document.getElementById(this.tableId).getElementsByClassName("el-checkbox")[0].style.display = "block";
        }
      }

后续优化提示

     
      showTooltip(obj, id, html, width, height,className,isIE) {
        if (document.getElementById(id) == null) {
            let tooltipBox;
            tooltipBox = document.createElement('div');
            tooltipBox.className = className;
            tooltipBox.id = id;
            tooltipBox.innerHTML = html;

            obj.appendChild(tooltipBox);

            if (!width && isIE) {
                tooltipBox.style.width = tooltipBox.offsetWidth;
            }

            tooltipBox.style.position = "absolute";
            tooltipBox.style.display = "block";
            obj.addEventListener('mouseleave',function () {
                setTimeout(function () {
                    document.getElementById(id).style.display = "none";
                }, 100);
            })

        } else {
            document.getElementById(id).style.display = "block";
        }
      }

      canSelect()
      {
        if( document.getElementById(this.tableId)==null ||  document.getElementById(this.tableId).getElementsByClassName("el-checkbox").length==0)
          return
        if(!this.canSelect)              //   在不能全选里面加入
        {
            const self = this;    
            let t1 =document.getElementsByClassName('el-checkbox__inner')        //   获取表格里所有的checkbox框
            for(let i= 0;i<t1.length;i++){                                                                      
              let  className = 'tooltip-box';                                                                //    定义一个类名
              let  isIE = navigator.userAgent.indexOf('MSIE') != -1;                           //    浏览器兼容
              t1[i].addEventListener('mouseover',function(){                                     //     为每一个添加 鼠标浮入事件 
                let showText 
                if(self.sqbm)
                  showText = '不能跨公司选择资金审批申请。'
                else
                  showText = '不能跨板块选择资金审批申请。'
                self.showTooltip(this,'tooltip'+i,showText,112,43,className,isIE);
              },false)
            }
          document.getElementById(this.tableId).getElementsByClassName("el-checkbox")[0].style.display = "none";
        }
        else
        {

          document.getElementById(this.tableId).getElementsByClassName("el-checkbox")[0].style.display = "block";
        }
      }