elementui checkbox 多选框

ElementUI 多选框是一种常用的表单组件，可以让用户在多个选项中选择一个或多个选项。它提供了丰富的样式和功能，可以自定义选项的标签、值、禁用状态等。在使用时，需要引入 ElementUI 的相关组件和样式，并按照文档说明进行配置和使用。

相关问题

elementui的多选框

ElementUI中的多选框组件是el-checkbox-group和el-checkbox。其中，el-checkbox-group用于包裹多个el-checkbox，实现多选效果。el-checkbox则是单个多选框。具体使用方法如下：

1. 引入ElementUI组件库和样式文件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 在组件中使用el-checkbox-group和el-checkbox

<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox label="北京"></el-checkbox>
    <el-checkbox label="上海"></el-checkbox>
    <el-checkbox label="广州"></el-checkbox>
    <el-checkbox label="深圳"></el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkedCities: [], // 选中的城市
    };
  },
};
</script>

其中，v-model绑定了选中的城市数组，label属性绑定了每个多选框的值。在选中和取消选中多选框时，会自动更新checkedCities数组的值。

elementui 省市 多选框

以下是使用ElementUI实现省市多选框的示例代码：

<template>
  <div>
    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都'],
      checkAll: false,
      checkedCities: []
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
    },
    handleCheckedCitiesChange(val) {
      let checkedCount = val.length;
      this.checkAll = checkedCount === this.cities.length;
    }
  }
};
</script>

在这个示例中，我们使用了ElementUI的`el-checkbox`和`el-checkbox-group`组件来实现多选框。`cities`数组中存储了所有可选的省市，`checkAll`表示是否全选，`checkedCities`存储了用户选择的省市。当用户点击全选框时，我们将`checkedCities`设置为所有省市，当用户选择或取消选择某个省市时，我们需要更新`checkAll`的状态。