上圖先，看效果！！！
//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>
export default {
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)
var checks = document.getElementsByName('saleIndex')
var span = 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)
var checks = document.getElementsByName('saleIndex')
var span = 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>
樣式省略。。。