表单特殊处理checkbox和radio没有value属性的情况

src/components/common-form-control/control-child.vue

@@ -26,6 +26,19 @@ const label = computed(() => {
   }
   return option.label
 })
+/**
+ * element-plus的复选框和单选框没有value值，只有label用于存储值，因此特殊处理
+ * @type {string[]}
+ */
+const labelAsValueKeys = ['checkbox', 'radio', 'checkbox-button', 'radio-button']
+
+const labelOrValue = computed(() => {
+  const option = props.option
+  if (labelAsValueKeys.includes(option.type)) {
+    return option.value
+  }
+  return label.value
+})
 
 </script>
 
@@ -33,9 +46,11 @@ const label = computed(() => {
   <component
     :is="inputType"
     :value="option.value"
-    :label="label"
+    :label="labelOrValue"
     v-bind="option.attrs"
-  />
+  >
+    {{ label }}
+  </component>
 </template>
 
 <style scoped>

src/components/common-form-control/index.vue

@@ -7,7 +7,7 @@ import ControlChild from '@/components/common-form-control/control-child.vue'
  * 定义一些注释属性，方便代码提示
  * @typedef {Object} CommonFormOption
  * @property {'input'|'input-number'|'cascader'|'radio'
- * |'radio-group'|'checkbox'|'checkbox-group'|'date-picker'
+ * |'radio-group'|'radio-button'|'checkbox'|'checkbox-group'|'checkbox-button'|'date-picker'
  * |'time-picker'|'switch'|'select'|'option'|'slider'|'transfer'|'upload'} type 类型
  * @property {any} value 数据值
  * @property {string|[string]} prop 属性
@@ -60,20 +60,20 @@ const label = computed(() => {
   return option.label
 })
 
-const controlModel = computed(() => props.option.model || props.model)
+const formModel = computed(() => props.option.model || props.model)
 
 const modelValue = computed({
   get () {
-    console.info('=================', controlModel.value)
+    console.info('=================', formModel.value)
-    if (controlModel.value && props.option.prop) {
+    if (formModel.value && props.option.prop) {
-      return controlModel.value[props.option.prop]
+      return formModel.value[props.option.prop]
     }
     return null
   },
   set (val) {
-    console.info('set===============', controlModel.value)
+    console.info('set===============', formModel.value)
-    if (controlModel.value && props.option.prop) {
+    if (formModel.value && props.option.prop) {
-      controlModel.value[props.option.prop] = val
+      formModel.value[props.option.prop] = val
     }
   }
 })

src/components/common-table/index.vue

@@ -1,10 +1,10 @@
 <script setup>
+import CommonTableColumn from '@/components/common-table/common-table-column.vue'
+
 /**
  * @typedef {TableProps} CommonTableProps
  * @property {[CommonTableColumn]} columns
  */
-import CommonTableColumn from '@/components/common-table/common-table-column.vue'
-
 /**
  * @type CommonTableProps
  */

src/views/tools/Forms.vue

@@ -55,6 +55,26 @@ const formOptions = [{
       value: 'sleep'
     }
   ]
+}, {
+  label: '职业',
+  type: 'select',
+  prop: 'career',
+  value: '',
+  required: true,
+  children: [
+    {
+      label: '程序员',
+      value: 'programer'
+    },
+    {
+      label: '无业游民',
+      value: 'none'
+    },
+    {
+      label: '教师',
+      value: 'teacher'
+    }
+  ]
 }, {
   label: '性别',
   type: 'radio-group',