官网链接:
https://element-plus.org/zh-CN/component/checkbox.html
indeterminate 与 v-model
indeterminate
属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。- v-model 是绑定值
indeterminate 与 v-model 对应不同值的组合可以改变 checkbox 的状态
el-checkbox 的状态
示例:官方代码
javascript default_cursor_land"><template><el-checkboxv-model="checkAll":indeterminate="isIndeterminate"@change="handleCheckAllChange">Check all</el-checkbox><el-checkbox-groupv-model="checkedCities"@change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">{{ city }}</el-checkbox></el-checkbox-group>
</template><script lang="ts" setup>
import { ref } from 'vue'const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']const handleCheckAllChange = (val: boolean) => {checkedCities.value = val ? cities : []isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {const checkedCount = value.lengthcheckAll.value = checkedCount === cities.lengthisIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>