【工作日志】elementUI学习-Layout布局-2

来源：互联网发布：召唤师捏脸数据编辑：程序博客网时间：2024/06/01 11:36

CheckBox复选框

1.基本用法

按钮是单一时，绑定v-model变量，类型为boolean值。

<template>  <!-- `checked` 为 true 或 false -->  <el-checkbox v-model="checked">备选项</el-checkbox></template><script>  export default {    data() {      return {        checked: true      };    }  };</script>

2.禁用状态

设置其disabled属性即可。

<template>  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>  <el-checkbox v-model="checked2" disabled>备选项</el-checkbox></template><script>  export default {    data() {      return {        checked1: false,        checked2: true      };    }  };</script>

3.多选框组

1.使用<checkbox-group> </checkbox-group>包裹即可，v-model的值绑定为Array类型变量。

在<el-checkbox>中的label属性为checkbox对应的值。
（标签无内容，该属性充当checkbox按钮后的介绍）

label与数组中的元素值相对应。存在则为选中，不存在则不选中。

<template>  <el-checkbox-group v-model="checkList">    <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></template><script>  export default {    data () {      return {        checkList: ['选中且禁用','复选框 A']      };    }  };</script>

4.indeterminate状态

indeterminate属性只控制样式变化。
@change当绑定值变化时，触发的事件。

<template>  <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">{{city}}</el-checkbox>  </el-checkbox-group></template><script>  const cityOptions = ['上海', '北京', '广州', '深圳'];  export default {    data() {      return {        checkAll: true,        checkedCities: ['上海', '北京'],        cities: cityOptions,        isIndeterminate: true      };    },    methods: {      handleCheckAllChange(event) {        this.checkedCities = event.target.checked ? 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>

0 1