上圖先，看效果！！！

//vue資料夾內
<el-form :model="form" class="form-inline">
              <!-- :style="selectNum >= 8 || selectNum <=1 ? 'pointer-events: none;' : ''"
              實現了但最後一個時與超過8哥時不能再進行選擇，但不能退選與繼續進行多選
              在還沒8個跟一個時則能繼續反覆選擇-->
              <el-form-item label="基礎指標:"
 
>
                <el-checkbox-group v-model="form.saleIndex">
                  <el-checkbox label="累計會員數" name="saleIndex" checked></el-checkbox>
                  <el-checkbox label="累計會員佔比" name="saleIndex" checked></el-checkbox>
                </el-checkbox-group
 
>
              </el-form-item>
              <el-form-item label="成交指標:">
                <!-- :style="selectNum >= 8 ? 'pointer-events: none;' : ''" 設定不能點選，但已經選擇的不能退選了？ -->
                <el-checkbox-group v-model="form.serviceIndex">
                  <el-checkbox 
 
label="成交會員數" name="saleIndex" checked></el-checkbox>
                  <el-checkbox label="成交會員佔比" name="saleIndex" checked></el-checkbox>
                  <el-checkbox label="支付訂單數" name="saleIndex" checked></el-checkbox>
                  <el-checkbox label="客單價" name="saleIndex"></el-checkbox>
                  <el-checkbox label="支付金額" name="saleIndex"></el-checkbox>
                  <el-checkbox label="支付金額佔比" name="saleIndex"></el-checkbox>
                  <el-checkbox label="人均消費頻次" name="saleIndex"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <span id="maxSelectSpan">最多選擇8項</span>
              <span class="form-inline-select">已選擇 {{selectNum}}/8 個指標</span>
            </el-form>

<script> exportdefault{ data(){ return{ 　　　　form:{ saleIndex:[],//銷售指標 serviceIndex:[]//服務指標 }, selectNum:0,//選擇指標的數量 sumData:[], 　　　　} 　　} watch:{ //第五部分的最多項多選款監聽 'form.saleIndex'(){ this.selectNum=this.form.saleIndex.length+this.form.serviceIndex.length //console.log(this.customIndexForm.prodSurvey) //sumData是用來存放點選選中的文字框資訊 this.sumData=[] this.sumData=this.sumData.concat(this.form.saleIndex).concat(this.form.serviceIndex) //console.log(this.sumData) varchecks=document.getElementsByName('saleIndex') varspan=document.getElementById('maxSelectSpan') checks.forEach(i=>{ if(this.selectNum>=8){ this.textShare(span,'red') if(!i.checked){ i.setAttribute('disabled','true') } } if(this.selectNum<8){ if(!i.checked){ i.setAttribute('disabled','true') } } }) if(this.selectNum<8){ this.textShare(span,'grey') checks.forEach(i=>{ i.removeAttribute('disabled') }) } }, 'form.serviceIndex'(){ this.selectNum=this.form.saleIndex.length+this.form.serviceIndex.length this.sumData=[] this.sumData=this.sumData.concat(this.form.saleIndex).concat(this.form.serviceIndex) console.log(this.sumData) varchecks=document.getElementsByName('saleIndex') varspan=document.getElementById('maxSelectSpan') checks.forEach(i=>{ if(this.selectNum>=8){ this.textShare(span,'red') if(!i.checked){ i.setAttribute('disabled','true') } } }) if(this.selectNum<8){ this.textShare(span,'grey') checks.forEach(i=>{ i.removeAttribute('disabled') }) } } //將存放的選擇框資料呼叫函式來執行資料響應展示操作 //'sumData'(){ //this.getRealTimechartData() //} }, 　　/** *文字效果 */ textShare(div,color){ //文字跳動 div.style.color=color } } </script> 樣式省略。。。