跨板塊禁止選擇

需求 是有好幾個板塊 裏面各有本身的表格數據，當選擇一個板塊的表格數據，再點開其餘板塊禁止他們的表格選擇

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