vue之ele中el-checkbox-group复选框组件的使用

最新推荐文章于 2025-06-23 10:53:00 发布

原创

最新推荐文章于 2025-06-23 10:53:00 发布 · 5.6k 阅读

标签

#vue.js

收录于

vue之ele中el-checkbox-group复选框组件的使用

Home.vue

<!--
描述：
  作者：xzl
  时间：05月05日160944
-->
<template>
  <div>
    <div>checkedId - {
   
   {
   
    checkedId }}</div>
    <el-checkbox-group v-model="checkedId" @change="handleChecked">
      <el-checkbox v-for="item in List" :label="item.value" :key="item.value">{
   
   {
   
    item.label }}</el-checkbox>
    </el-checkbox-group>

    <button @click="setTeam">班组设置</button>
    <SetTeam :visible="teamShow" v-if="teamShow" :fatherCheckedId="checkedId" @changeDialog="changeDialog" @comfirmBtn="comfirmBtn"></SetTeam>
  </div>
</template>

<script>
import SetTeam from './SetTeam.vue'
export default {
   
   
  name: 'Home',
  components: {
   
   
    SetTeam
  },
  data() {
   
   
    return {
   
   
      teamShow: false,
      checkedId: [],
      List: [
        {
   
   
          value: 1,
          label: '手机'
        },
        {