百度给做网站公司,苏州自助模板建站,产品营销方案案例范文,手机实用网站一组备选项中进行多选 1.如何使用#xff1f;
单独使用可以表示两种状态之间的切换#xff0c;写在标签中的内容为 checkbox 按钮后的介绍。
//在el-checkbox元素中定义v-model绑定变量#xff0c;单一的checkbox中#xff0c;默认绑定变量的值会是Boolean#xff0c;选… 一组备选项中进行多选 1.如何使用
单独使用可以表示两种状态之间的切换写在标签中的内容为 checkbox 按钮后的介绍。
//在el-checkbox元素中定义v-model绑定变量单一的checkbox中默认绑定变量的值会是Boolean选中为true。template!-- checked 为 true 或 false --el-checkbox v-modelchecked备选项/el-checkbox
/template
scriptexport default {data() {return {checked: true};}};
/script
2.禁用状态
多选框不可用状态。
设置disabled属性即可。templateel-checkbox v-modelchecked1 disabled备选项1/el-checkboxel-checkbox v-modelchecked2 disabled备选项/el-checkbox
/template
scriptexport default {data() {return {checked1: false,checked2: true};}};
/script
3.多选框组
适用于多个勾选框绑定到同一个数组的情景通过是否勾选来表示这一组选项中选中的项。
/*checkbox-group元素能把多个 checkbox 管理为一组只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值若该标签中无内容则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应如果存在指定的值则为选中状态否则为不选中。*/templateel-checkbox-group v-modelcheckListel-checkbox label复选框 A/el-checkboxel-checkbox label复选框 B/el-checkboxel-checkbox label复选框 C/el-checkboxel-checkbox label禁用 disabled/el-checkboxel-checkbox label选中且禁用 disabled/el-checkbox/el-checkbox-group
/templatescriptexport default {data () {return {checkList: [选中且禁用,复选框 A]};}};
/script
4.indeterminate 状态
indeterminate 属性用以表示 checkbox 的不确定状态一般用于实现全选的效果
templateel-checkbox :indeterminateisIndeterminate v-modelcheckAll changehandleCheckAllChange全选/el-checkboxdiv stylemargin: 15px 0;/divel-checkbox-group v-modelcheckedCities changehandleCheckedCitiesChangeel-checkbox v-forcity in cities :labelcity :keycity{{city}}/el-checkbox/el-checkbox-group
/template
scriptconst cityOptions [上海, 北京, 广州, 深圳];export default {data() {return {checkAll: false,checkedCities: [上海, 北京],cities: cityOptions,isIndeterminate: true};},methods: {handleCheckAllChange(val) {this.checkedCities val ? cityOptions : [];this.isIndeterminate false;},handleCheckedCitiesChange(value) {let checkedCount value.length;this.checkAll checkedCount this.cities.length;this.isIndeterminate checkedCount 0 checkedCount this.cities.length;}}};
/script
5.可选项目数量的限制
使用 min 和 max 属性能够限制可以被勾选的项目的数量。
templateel-checkbox-group v-modelcheckedCities:min1:max2el-checkbox v-forcity in cities :labelcity :keycity{{city}}/el-checkbox/el-checkbox-group
/template
scriptconst cityOptions [上海, 北京, 广州, 深圳];export default {data() {return {checkedCities: [上海, 北京],cities: cityOptions};}};
/script
6.按钮样式
按钮样式的多选组合。
templatedivel-checkbox-group v-modelcheckboxGroup1el-checkbox-button v-forcity in cities :labelcity :keycity{{city}}/el-checkbox-button/el-checkbox-group/divdiv stylemargin-top: 20pxel-checkbox-group v-modelcheckboxGroup2 sizemediumel-checkbox-button v-forcity in cities :labelcity :keycity{{city}}/el-checkbox-button/el-checkbox-group/divdiv stylemargin-top: 20pxel-checkbox-group v-modelcheckboxGroup3 sizesmallel-checkbox-button v-forcity in cities :labelcity :disabledcity 北京 :keycity{{city}}/el-checkbox-button/el-checkbox-group/divdiv stylemargin-top: 20pxel-checkbox-group v-modelcheckboxGroup4 sizemini disabledel-checkbox-button v-forcity in cities :labelcity :keycity{{city}}/el-checkbox-button/el-checkbox-group/div
/template
scriptconst cityOptions [上海, 北京, 广州, 深圳];export default {data () {return {checkboxGroup1: [上海],checkboxGroup2: [上海],checkboxGroup3: [上海],checkboxGroup4: [上海],cities: cityOptions};}}
/script
7.带有边框
设置border属性可以渲染为带有边框的多选框。templatedivel-checkbox v-modelchecked1 label备选项1 border/el-checkboxel-checkbox v-modelchecked2 label备选项2 border/el-checkbox/divdiv stylemargin-top: 20pxel-checkbox v-modelchecked3 label备选项1 border sizemedium/el-checkboxel-checkbox v-modelchecked4 label备选项2 border sizemedium/el-checkbox/divdiv stylemargin-top: 20pxel-checkbox-group v-modelcheckboxGroup1 sizesmallel-checkbox label备选项1 border/el-checkboxel-checkbox label备选项2 border disabled/el-checkbox/el-checkbox-group/divdiv stylemargin-top: 20pxel-checkbox-group v-modelcheckboxGroup2 sizemini disabledel-checkbox label备选项1 border/el-checkboxel-checkbox label备选项2 border/el-checkbox/el-checkbox-group/div
/templatescriptexport default {data () {return {checked1: true,checked2: false,checked3: false,checked4: true,checkboxGroup1: [],checkboxGroup2: []};}}
/script
