多选框补充输入测试

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-01-18 16:21:13
+ * @LastEditTime: 2023-01-30 12:40:36
  * @FilePath: /data-table/src/components/CheckboxField/index.vue
  * @Description: 多项选择控件
 -->
@@ -19,6 +19,7 @@
       <template #input>
         <van-checkbox-group
           v-model="item.value"
+          @change="onChange(item)"
           :direction="item.component_props.direction"
           :max="item.component_props.max"
           style="width: 100%"
@@ -33,6 +34,7 @@
             style="margin-bottom: 0.25rem"
             >{{ x.title }}</van-checkbox
           >
+          <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" />
         </van-checkbox-group>
       </template>
     </van-field>
@@ -57,6 +59,18 @@ onMounted(() => {
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
+// TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
+// 绑定值发生变化时回调，处理选项为其他时的输入项录入
+const has_add_info = ref(true); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
+const add_info = ref('');
+const add_info_name = ref(props.item.key + '#');
+const add_info_key = ref('其他'); // TODO: 以后动态获取
+const onChange = (item) => {
+  console.warn(item);
+}
+onMounted(() => {
+  add_info_name.value = `${props.item.key}#${add_info_key.value}`
+})
 </script>
 
 <style lang="less" scoped>

 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-01-30 11:09:03
+ * @LastEditTime: 2023-01-30 12:41:51
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @Description: 单项选择控件
 -->
@@ -29,7 +29,7 @@
             style="margin-bottom: 0.25rem"
             >{{ x.title }}</van-radio
           >
-          <van-field v-if="has_add_info" :name="item.key + '#other_add_info'" v-model="add_info" label="" placeholder="请输入补充信息" />
+          <van-field v-if="has_add_info" :name="add_info_name" v-model="add_info" label="" placeholder="请输入补充信息" />
         </van-radio-group>
       </template>
     </van-field>
@@ -53,13 +53,15 @@ const HideShow = computed(() => {
 })
 // TEST: 测试新功能：选择其他选项时，下方出现输入框，如果其他项被选中，输入框值为最终录入值。
 // 绑定值发生变化时回调，处理选项为其他时的输入项录入
-const has_add_info = ref(false); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
+const has_add_info = ref(true); // 文字不一定是其他，后续可能需要字段绑定一个值,标识是否有其他输入框进行判断
 const add_info = ref('');
+const add_info_name = ref(props.item.key + '#');
+const add_info_key = ref('其他'); // TODO: 以后动态获取
 const onChange = (item) => {
   console.warn(item);
 }
 onMounted(() => {
-  // props.item.value = '120'
+  add_info_name.value = `${props.item.key}#${add_info_key.value}`
 })
 </script>
 

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-01-30 11:07:51
+ * @LastEditTime: 2023-01-30 12:39:07
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -362,11 +362,21 @@ const validOther = () => {
 const preValidData = (values) => {
   // 过滤掉标识为 ignore，undefined 的字段数据
   let { ignore, undefined, ...rest_data } = values;
-  // TAG: 处理其他补充消息
+  // TAG: 处理其他补充消息输入框内容
   for (const key in rest_data) {
-    if (key.includes('other_add_info')) {
-      const name = key.split('#')[0];
-      rest_data[name] = rest_data[key]
+    if (key.includes('#')) { // #号为自定义标识
+      const [input_key, input_value] = key.split('#'); // 原始key值标记
+      if (typeof rest_data[input_key] === 'object') { // 多选框值为数组
+        rest_data[input_key].forEach((element, index)=> {
+          if (element === input_value) { // 标签名等于选择的值
+            rest_data[input_key][index] = rest_data[key];
+          }
+        });
+      } else { // 单选框值为字符串
+        if (rest_data[input_key] === input_value) { // 标签名等于选择的值
+          rest_data[input_key] = rest_data[key];
+        }
+      }
     }
   }
   // console.warn(postData.value);