Checkbox 多选框

常用与选择多个选项相关的场景。

注意

pa-checkbox 可独立使用，在 pa-form/pa-table 中可使用时，需配置 prop 字段。

组件功能展示

基础使用

选项1

选项2

Display

选项1

单组件使用

选项1

选项2

<template>
  <pa-title :padding="['bottom']">基础使用</pa-title>
  <pa-checkbox v-model="value1" :exOptions="exOptions"></pa-checkbox>

  <pa-title :padding="['bottom']">Display</pa-title>
  <pa-checkbox v-model="value1" :exOptions="exOptions" display></pa-checkbox>

  <pa-title :padding="['bottom']">单组件使用</pa-title>
  <pa-checkbox-item v-model="value2" label="选项1" value="1"></pa-checkbox-item>
  <pa-checkbox-item v-model="value2" label="选项2" value="2" disabled></pa-checkbox-item>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const value1 = ref([1]);
const value2 = ref(1);

const exOptions = ref([
  { label: "选项1", value: 1 },
  { label: "选项2", value: 2 }
]);
</script>

<style></style>

显示代码

SaCheckboxType

字段	描述	类型	默认值
modelValue	绑定值	Array<boolean | number | string>	—
disabled	禁用状态	boolean	—
display	纯展示	boolean	false
exOptions	选项	MOptionV2Type.SelectList	—
contrastData	对比用原数据	string number boolean	—
alwaysContrast	是否总是显示对不数据	boolean	false

SaCheckboxItemType

字段	描述	类型	默认值
modelValue	绑定值	string number boolean	—
label	选项名	string	—
value	选项值	string number boolean	—
isChecked	是否选中	boolean	false
isIndeterminate	是否半选	boolean	false
disabled	禁用状态	boolean	—

SaRadioEvents

字段	描述	类型
change	当值改变时触发	function

MOptionV2Type.SelectList(Array<SaSelectOptionsType>)

字段	描述	类型	默认值
label	选项名	string
value	选项值	string number boolean
children	子选项	Array<SaSelectOptionsType>
disabled	禁用状态	boolean	false
base	默认数据	any
tagStyle	标签样式	{bgColor?: string, textColor?: string} string