vue项目中使用多选框的实例代码

为了让解释更加清晰，我准备从以下几个方面来讲解：

引入vue的核心库和需要的组件
配置数据源和绑定数据
实现多选功能
示例说明

1. 引入vue的核心库和需要的组件

首先，在vue项目中使用多选框，需要引入vue的核心库和需要的组件：

<!-- 引入vue的核心库 -->
<script src="https://unpkg.com/vue"></script>

<!-- 引入element-ui的多选框组件 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

其中，我们需要使用element-ui的多选框组件。

2. 配置数据源和绑定数据

在vue项目中使用多选框，还需要配置数据源和绑定数据，代码如下：

<div id="app">
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox label="Beijing"></el-checkbox>
    <el-checkbox label="Shanghai"></el-checkbox>
    <el-checkbox label="Guangzhou"></el-checkbox>
    <el-checkbox label="Shenzhen"></el-checkbox>
    <el-checkbox label="Hangzhou"></el-checkbox>
    <el-checkbox label="Chengdu"></el-checkbox>
  </el-checkbox-group>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checkedCities: []
  },
  methods: {
    handleCheckedCitiesChange(checkedCities) {
      console.log(checkedCities);
    }
  }
})
</script>

在这段代码中，定义了一个el-checkbox-group组件用来显示多个el-checkbox多选框，并且绑定数据源checkedCities，当多选框被选中或取消选中时，会调用handleCheckedCitiesChange方法。

3. 实现多选功能

最后，我们需要实现多选功能，代码如下：

<div id="app">
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox label="Beijing"></el-checkbox>
    <el-checkbox label="Shanghai"></el-checkbox>
    <el-checkbox label="Guangzhou"></el-checkbox>
    <el-checkbox label="Shenzhen"></el-checkbox>
    <el-checkbox label="Hangzhou"></el-checkbox>
    <el-checkbox label="Chengdu"></el-checkbox>
  </el-checkbox-group>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checkedCities: []
  },
  methods: {
    handleCheckedCitiesChange(checkedCities) {
      console.log(checkedCities);
    }
  }
})
</script>

在这段代码中，我们首先定义一个checkedCities的空数组，然后使用v-model指令将多选框的值和数组checkedCities进行双向绑定。当多选框的选中状态发生变化时，会调用handleCheckedCitiesChange方法，并将当前选中的城市列表checkedCities作为参数传递进来。

4. 示例说明

此外，我们再看两个实例以加深理解：

示例一

我们需要选择一个或多个爱好，然后将选择的值提交到服务器进行处理。完整代码如下：

<template>
  <div>
    <el-checkbox-group v-model="checkedHobbies">
      <el-checkbox label="reading">阅读</el-checkbox>
      <el-checkbox label="music">音乐</el-checkbox>
      <el-checkbox label="travel">旅游</el-checkbox>
      <el-checkbox label="movie">电影</el-checkbox>
    </el-checkbox-group>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedHobbies: []
    };
  },
  methods: {
    handleSubmit() {
      /* 将选中的爱好的值提交到服务器进行处理 */
      console.log(this.checkedHobbies);
    }
  }
};
</script>

在这个示例中，我们使用了el-checkbox-group组件将多个el-checkbox多选框组合到一起，然后使用v-model指令将选中的值和一个名为checkedHobbies的数组进行双向绑定。当点击提交按钮时，会将数组checkedHobbies的值打印到控制台中。你可以根据需要修改handleSubmit方法来实现你需要的功能。

示例二

这个示例演示如何使用嵌套结构的多选框。我们使用了一个地区列表和城市列表，用户可以选择一个或多个城市来配置他所在的地区。完整代码如下：

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <p>请选择您所在的地区：</p>
        <el-checkbox v-model="selectedAreas" @change="handleAreasChange">华北</el-checkbox>
        <el-checkbox v-model="selectedAreas" @change="handleAreasChange">华东</el-checkbox>
        <el-checkbox v-model="selectedAreas" @change="handleAreasChange">华南</el-checkbox>
        <el-checkbox v-model="selectedAreas" @change="handleAreasChange">华中</el-checkbox>
        <el-checkbox v-model="selectedAreas" @change="handleAreasChange">西南</el-checkbox>
        <el-checkbox v-model="selectedAreas" @change="handleAreasChange">西北</el-checkbox>
      </el-col>
      <el-col :span="12">
        <p>请为您所在的地区选择城市：</p>
        <el-checkbox-group v-model="selectedCities">
          <el-checkbox v-for="city in getCities()" :key="city" :label="city">{{city}}</el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      areas: {
        北京: ['北京'],
        天津: ['天津'],
        河北: ['石家庄', '唐山', '保定'],
        山西: ['太原', '大同', '阳泉', '晋城'],
        辽宁: ['沈阳', '大连', '鞍山'],
        吉林: ['长春', '吉林', '四平'],
        黑龙江: ['哈尔滨', '齐齐哈尔', '牡丹江'],
        上海: ['上海'],
        江苏: ['南京', '苏州', '无锡'],
        浙江: ['杭州', '宁波', '温州'],
        安徽: ['合肥', '芜湖', '蚌埠'],
        福建: ['福州', '厦门', '漳州'],
        江西: ['南昌', '赣州', '九江'],
        山东: ['济南', '青岛', '烟台', '临沂'],
        河南: ['郑州', '洛阳', '开封']
      },
      selectedAreas: [],
      selectedCities: []
    };
  },
  methods: {
    handleAreasChange(val) {
      this.selectedCities = [];
    },
    getCities() {
      let cities = [];
      this.selectedAreas.forEach(area => {
        cities = cities.concat(this.areas[area]);
      });
      return cities;
    }
  }
};
</script>

在这个示例中，我们使用了两个el-checkbox多选框，用户首先需要选择他们所在的地区，然后再从城市列表中选择一个或多个城市，以便配置地区和城市。当地区的选中状态发生变化时，我们会清空selectedCities数组并重新计算新的城市列表。由于该示例涉及到一些计算和嵌套组件，因此我们需要写一些额外的方法来处理这些逻辑。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue项目中使用多选框的实例代码 - Python技术站