中興 S30 系列現已開售,6000mAh 電池,1698 至 2998 元
阿新 • • 發佈:2021-04-05
使用elementui 實現複選框的層級聯動,可能我的表述不準確,先上一個效果圖。
實際開發中可能遇到這樣的場景,當選擇高一層級的複選框時它包含的低階的複選框就不需要再勾選,需要預設選中並且禁止選用。
下面貼一下程式碼,歡迎各位給出更好的意見
<template> <div class="test-container"> <el-checkbox-group v-model="checkBoxVal" @change="checkBoxChange"> <el-checkbox label="0" :disabled="checkboxList[0]">分數可見</el-checkbox> <el-checkbox label="1" :disabled="checkboxList[1]">對錯可見</el-checkbox> <el-checkbox label="2" :disabled="checkboxList[2]">解析可見</el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { checkBoxVal: [], checkboxList: [] } }, methods: { checkBoxChange(val) { var max = Math.max.apply(null, val) var arr = [] for (let i = 0; i <= max; i++) { if (i !== max) { this.checkboxList[i] = true } else { this.checkboxList[i] = false } arr.push(String(i)) } this.checkBoxVal = Array.from(new Set(arr)) }, } } </script> <style lang='less' scoped> .test-container { height: calc(90vh); } </style>
需要注意elementui的@change="checkBoxChange"傳遞的引數val是一個數組,Math.max.apply的引數期望值也是一個數組。