Checkbox 多選框詳情 - 複選框,字符串,List,Vue.js,前端開發 wzw45233 博客

在 ElementUI（Vue2）中，<el-checkbox>（多選框）用於多選項勾選場景，支持「單個複選框」（二選一）和「複選框組」（多選一/多選），是表單中高頻使用的組件。以下結合你的公交卡業務場景，給出完整使用指南：

一、核心作用

單個複選框：二值選擇（如“是否開啓服務費自動續費”“是否免審核”）；
複選框組（el-checkbox-group）：多選項勾選（如公交卡適用人羣、適用線路、免費時段類型）；
支持半選狀態（indeterminate）、全選/反選、禁用部分選項，適配複雜多選場景。

二、基礎用法

1. 單個複選框（二值選擇）

適用於「是/否」類單選項，綁定布爾值：

<template>
  <el-form-item label="是否免身份審核">
    <el-checkbox
      v-model="isFreeAudit"
      label="免審核"  <!-- 勾選時的標識（非必須，僅作描述） -->
      @change="handleCheckChange"
    >
      開啓免身份審核（老年卡默認開啓）
    </el-checkbox>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      isFreeAudit: true // 初始勾選
    };
  },
  methods: {
    handleCheckChange(val) {
      console.log("是否免審核：", val); // true（勾選）/ false（取消）
    }
  }
};
</script>

2. 複選框組（多選項勾選）

適用於「多選一/多選多」場景，綁定數組（存儲勾選的 label 值），核心是 el-checkbox-group 包裹 el-checkbox：

<template>
  <el-form-item label="公交卡適用人羣">
    <el-checkbox-group
      v-model="selectedGroups"
      @change="handleGroupChange"
    >
      <el-checkbox label="student">學生</el-checkbox>
      <el-checkbox label="elderly">老年</el-checkbox>
      <el-checkbox label="ordinary">普通市民</el-checkbox>
      <el-checkbox label="disabled">殘障人士</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      selectedGroups: ["elderly"] // 初始勾選“老年”
    };
  },
  methods: {
    handleGroupChange(val) {
      console.log("選中的人羣：", val); // ["elderly", "student"]（多選結果）
    }
  }
};
</script>

三、核心屬性 & 事件

1. 單個 `el-checkbox` 屬性

屬性名	類型	説明
`v-model`	布爾	綁定值（是否勾選）
`label`	任意	複選框標識（提交時的取值，支持字符串/數字/對象）
`disabled`	布爾	是否禁用（如：已下架的卡類型禁用對應選項）
`indeterminate`	布爾	是否為半選狀態（僅視覺效果，用於全選邏輯，默認：false）
`true-label`	任意	勾選時的真實值（替代布爾值，如：true-label="1"，false-label="0"）
`false-label`	任意	取消勾選時的真實值
`name`	字符串	原生 input 的 name 屬性（表單提交用）

2. `el-checkbox-group` 屬性

屬性名	類型	説明
`v-model`	數組	綁定值（存儲所有勾選的 `label` 值）
`size`	字符串	尺寸（`large`/`medium`/`small`/`mini`，默認：medium）
`disabled`	布爾	禁用整個複選框組（所有子選項都禁用）

3. 通用事件

事件名	觸發時機	回調參數
`change`	勾選/取消勾選時觸發	單個複選框：布爾值；組：勾選的label數組

四、業務場景實戰（貼合公交卡需求）

場景1：公交卡適用線路多選（帶禁用）

<template>
  <el-form-item label="適用公交線路">
    <el-checkbox-group v-model="selectedLines">
      <el-checkbox 
        v-for="line in lineList" 
        :key="line.id" 
        :label="line.id" 
        :disabled="line.isDisabled"
      >
        {{ line.name }}
      </el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      selectedLines: [1, 3], // 初始勾選1路、3路
      lineList: [
        { id: 1, name: "1路（火車站-市政府）", isDisabled: false },
        { id: 2, name: "2路（高鐵站-汽車站）", isDisabled: true }, // 禁用
        { id: 3, name: "3路（公園-醫院）", isDisabled: false }
      ]
    };
  }
};
</script>

場景2：全選/反選（半選狀態）

適用於“批量選擇”場景（如全選所有線路），利用 indeterminate 實現半選視覺效果：

<template>
  <el-form-item label="適用公交線路">
    <!-- 全選複選框 -->
    <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
    >
      全選
    </el-checkbox>
    <!-- 線路列表 -->
    <el-checkbox-group
      v-model="selectedLines"
      @change="handleLineChange"
      style="margin-left: 20px;"
    >
      <el-checkbox label="1">1路</el-checkbox>
      <el-checkbox label="2">2路</el-checkbox>
      <el-checkbox label="3">3路</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      checkAll: false,
      isIndeterminate: true, // 初始半選
      selectedLines: ["1"] // 初始勾選1路
    };
  },
  methods: {
    // 全選/取消全選
    handleCheckAllChange(val) {
      this.selectedLines = val ? ["1", "2", "3"] : [];
      this.isIndeterminate = false;
    },
    // 線路勾選變化，更新全選/半選狀態
    handleLineChange(val) {
      const len = val.length;
      this.checkAll = len === 3;
      this.isIndeterminate = len > 0 && len < 3;
    }
  }
};
</script>

場景3：勾選值為對象（自定義label）

若需勾選後獲取完整對象（而非僅ID/字符串），label 可綁定對象：

<template>
  <el-checkbox-group v-model="selectedLineObjs" @change="handleObjChange">
    <el-checkbox 
      v-for="line in lineList" 
      :key="line.id" 
      :label="line"
    >
      {{ line.name }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      selectedLineObjs: [],
      lineList: [
        { id: 1, name: "1路", price: 1 },
        { id: 2, name: "2路", price: 2 }
      ]
    };
  },
  methods: {
    handleObjChange(val) {
      console.log("選中的線路對象：", val); 
      // 輸出：[{ id: 1, name: "1路", price: 1 }]
    }
  }
};
</script>

五、常見問題及解決

1. 回顯不生效？

原因：綁定值的類型與 label 類型不匹配（如 label="1" 是字符串，綁定值 [1] 是數字）。解決：保證類型一致：

<!-- 正確：label和綁定值都是數字 -->
<el-checkbox label="1" /> → 綁定值：[1] ❌ 
<el-checkbox :label="1" /> → 綁定值：[1] ✅

2. 半選狀態不顯示？

indeterminate 僅控制視覺效果，需手動維護該狀態（如場景2中 isIndeterminate = len > 0 && len < 3），且 v-model="checkAll" 仍為 false。

3. 禁用部分選項？

單個選項禁用：給 <el-checkbox> 加 :disabled="true"；整組禁用：給 <el-checkbox-group> 加 :disabled="true"。

4. 提交時需轉字符串？

若後端要求勾選值為逗號分隔的字符串（如 "1,3"），可在提交時轉換：

const submitData = {
  ...form,
  selectedLines: this.selectedLines.join(",")
};

六、ElementUI vs Element Plus 差異

特性	ElementUI（Vue2）	Element Plus（Vue3）
半選狀態	`indeterminate` 屬性	同上（兼容）
標籤插槽	直接寫在標籤內（如 `<el-checkbox>文字</el-checkbox>`）	支持 `#label` 插槽（更靈活）
對象類型 label	支持，但需注意引用類型匹配	完全支持，新增 `value-key` 指定唯一標識
尺寸屬性	`size` 僅支持組級別	支持單個複選框設置 `size`

wzw45233 博客

wzw45233 博客

博客 / 詳情