1. Checkbox多選框

1.1. 一組備選項中進行多選。

1.2. Checkbox屬性

參數	說明	類型	可選值	默認值
value / v-model	綁定值	string / number / boolean	無	無
label	選中狀態的值(只有在checkbox-group或者綁定對象類型為array時有效)	string / number / boolean	無	無
true-label	選中時的值	string / number	無	無
false-label	沒有選中時的值	string / number	無	無
disabled	是否禁用	boolean	無	false
border	是否顯示邊框	boolean	無	false
size	Checkbox的尺寸, 僅在border為真時有效	string	medium / small / mini	無
name	原生name屬性	string	無	無
checked	當前是否勾選	boolean	無	false
indeterminate	設置indeterminate狀態, 只負責樣式控制	boolean	無	false

1.3. Checkbox事件

事件名稱	說明	回調參數
change	當綁定值變化時觸發的事件	更新后的值

1.4. Checkbox-group屬性

參數	說明	類型	可選值	默認值
value / v-model	綁定值	array	無	無
size	多選框組尺寸, 僅對按鈕形式的Checkbox或帶有邊框的Checkbox有效	string	medium / small / mini	無
disabled	是否禁用	boolean	無	false
min	可被勾選的checkbox的最小數量	number	無	無
max	可被勾選的checkbox的最大數量	number	無	無
text-color	按鈕形式的Checkbox激活時的文本顏色	string	無	#ffffff
fill	按鈕形式的Checkbox激活時的填充色和邊框色	string	無	#409EFF

1.5. Checkbox-group事件

事件名稱	說明	回調參數
change	當綁定值變化時觸發的事件	更新后的值

1.6. Checkbox-button屬性

參數	說明	類型	可選值	默認值
label	選中狀態的值(只有在checkbox-group或者綁定對象類型為array時有效)	string / number / boolean	無	無
true-label	選中時的值	string / number	無	無
false-label	沒有選中時的值	string / number	無	無
disabled	是否禁用	boolean	無	false
name	原生name屬性	string	無	無
checked	當前是否勾選	boolean	無	false

2. Checkbox多選框例子

2.1. 使用腳手架新建一個名為element-ui-checkbox的前端項目, 同時安裝Element插件。

2.2. 編寫index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Checkbox from '../components/Checkbox.vue' import GroupCheckbox from '../components/GroupCheckbox.vue' import IndeterminateCheckbox from '../components/IndeterminateCheckbox.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Checkbox' },{ path: '/Checkbox', component: Checkbox },{ path: '/GroupCheckbox', component: GroupCheckbox },{ path: '/IndeterminateCheckbox', component: IndeterminateCheckbox } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Checkbox.vue

<template><div><h1>基礎用法</h1><h4>在el-checkbox元素中定義v-model綁定變量, 單一的checkbox中, 默認綁定變量的值會是Boolean, 選中為true。</h4><el-checkbox v-model="base_checkbox1" :true-label="1" :false-label="-1">旅游</el-checkbox><el-checkbox v-model="base_checkbox2" :true-label="2" :false-label="-1">游泳</el-checkbox><h1>禁用狀態</h1><h4>設置disabled屬性即可。</h4><el-checkbox v-model="disabled_checkbox1" true-label="旅游" false-label="" disabled>旅游</el-checkbox><el-checkbox v-model="disabled_checkbox2" true-label="游泳" false-label="" disabled>游泳</el-checkbox><h1>帶有邊框</h1><h4>設置border屬性可以渲染為帶有邊框的多選框。</h4><el-checkbox checked true-label="旅游" false-label="" border @change="handleCheckedCitiesChange">旅游</el-checkbox><el-checkbox checked true-label="游泳" false-label="" border @change="handleCheckedCitiesChange">游泳</el-checkbox></div> </template><script> export default {data () {return {base_checkbox1: 1,base_checkbox2: 2,disabled_checkbox1: '旅游',disabled_checkbox2: '游泳'}},methods: {handleCheckedCitiesChange (val) {console.log(val)}} } </script>

2.4. 在components下創建GroupCheckbox.vue

<template><div><h1>多選框組</h1><h4>checkbox-group元素能把多個checkbox 管理為一組, 只需要在Group中使用v-model綁定Array類型的變量即可。el-checkbox的label屬性是該checkbox對應的值, 若該標簽中無內容, 則該屬性也充當checkbox按鈕后的介紹。label與數組中的元素值相對應, 如果存在指定的值則為選中狀態, 否則為不選中。</h4><el-checkbox-group v-model="group_checkbox"><el-checkbox label="復選框 A"></el-checkbox><el-checkbox label="復選框 B"></el-checkbox><el-checkbox label="復選框 C"></el-checkbox><el-checkbox label="禁用" disabled></el-checkbox><el-checkbox label="選中且禁用" disabled></el-checkbox></el-checkbox-group><h1>可選項目數量的限制</h1><h4>使用min和max屬性能夠限制可以被勾選的項目的數量。</h4><el-checkbox-group v-model="checkedCities" :min="1" :max="2"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group><h1>按鈕樣式</h1><h4>只需要把el-checkbox元素替換為el-checkbox-button元素即可。此外, Element還提供了size屬性。</h4><div><el-checkbox-group v-model="button_checkbox_group1" text-color="#F56C6C" fill="#67C23A"><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="button_checkbox_group2" size="medium"><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="button_checkbox_group3" size="small"><el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div><div style="margin-top: 20px"><el-checkbox-group v-model="button_checkbox_group4" size="mini" disabled><el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button></el-checkbox-group></div></div> </template><script> export default {data () {return {group_checkbox: ['選中且禁用', '復選框 A'],checkedCities: ['北京', '上海'],cities: ['上海', '北京', '廣州', '深圳'],button_checkbox_group1: ['上海'],button_checkbox_group2: ['北京'],button_checkbox_group3: ['廣州'],button_checkbox_group4: ['深圳']}} } </script>

2.5. 在components下創建IndeterminateCheckbox.vue

<template><div><h1>indeterminate狀態</h1><h4>indeterminate屬性用以表示checkbox的不確定狀態, 一般用于實現全選的效果。</h4><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox><div style="margin: 15px 0;"></div><el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group></div> </template><script> const cityOptions = ['北京', '上海', '廣州', '深圳'] export default {data () {return {checkAll: false,checkedCities: ['北京', '上海'],cities: cityOptions,isIndeterminate: true}},methods: {handleCheckAllChange (val) {this.checkedCities = val ? cityOptions : []this.checkAll = this.checkedCities.length === this.cities.lengththis.isIndeterminate = false},handleCheckedCitiesChange (value) {const checkedCount = value.lengththis.checkAll = checkedCount === this.cities.lengththis.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length}} } </script>

2.6. 運行項目, 訪問http://localhost:8080/#/Checkbox

2.7. 運行項目, 訪問http://localhost:8080/#/GroupCheckbox

2.8. 運行項目, 訪問http://localhost:8080/#/IndeterminateCheckbox?

?

總結

以上是生活随笔為你收集整理的007_Checkbox多选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。