fix: protable添加一个change方法，可以用于在值发生变化时的回调

src/components/ProForm/components/Item.vue

@@ -5,6 +5,7 @@
     v-model.trim="_formModel[handleProp(item.prop)]"
     :data="['tree-select'].includes(item.compOptions.elTagName!) ? itemEnum : []"
     :options="['cascader', 'select-v2'].includes(item.compOptions.elTagName!) ? itemEnum : []"
+    @change="handleInputChange(item, formModel)"
   >
     <template v-if="item.compOptions.elTagName === 'cascader'" #default="{ data }">
       <span>{{ data[item.compOptions.labelKey || 'label'] }}</span>
@@ -44,10 +45,13 @@
 <script setup lang="ts" name="Item">
 import { computed, inject, ref } from 'vue'
 import { handleProp } from '@/utils'
+
 interface FormItem {
   item: ProForm.ItemsOptions
   formModel: Record<string, any>
+  change?: (val: any) => void
 }
+
 const props = defineProps<FormItem>()
 const _formModel = computed(() => props.formModel)
 const elTagNameValue = computed(() => {
@@ -73,4 +77,10 @@ const itemEnum = computed(() => {
   }
   return enumData
 })
+
+const handleInputChange = (item: ProForm.ItemsOptions, formModel: Record<string, any>) => {
+  if (item.change) {
+    props.change(item, formModel)
+  }
+}
 </script>

src/components/ProForm/index.vue

@@ -2,7 +2,7 @@
   <component :is="'el-form'" v-bind="_formOptions" ref="proFormRef" :model="formModel">
     <el-row :gutter="5">
       <template v-for="item in itemsOptions" :key="item.prop">
-        <el-col :span="item.span || 24" g v-if="show(item.show)">
+        <el-col :span="item.span || 24" v-if="show(item.show)">
           <component :is="'el-form-item'" v-bind="item">
             <template #label>
               <el-space :size="4">
@@ -46,7 +46,7 @@
             <template v-else-if="item.compOptions.elTagName === 'imgs-upload-s3'">
               <ImgsS3 v-model="formModel[item.prop]" v-bind="$attrs" />
             </template>
-            <Item v-else :item="item" :form-model="formModel" />
+            <Item v-else :item="item" :form-model="formModel" :change="item.change" />
           </component>
         </el-col>
       </template>
@@ -96,8 +96,8 @@ const props = withDefaults(defineProps<ProFormProps>(), {
 const show = (showFunction: any) => {
   if (!showFunction) return true
   if (typeof showFunction == 'function') {
-    // 直接调用 showFunction 函数，并传入 formModel.value
-    return showFunction(formModel.value)
+    // 直接调用 showFunction 函数，并传入 formModel，方便修改参数
+    return showFunction(formModel)
   }
   // 如果 showFunction 不是函数，直接返回 true 显示该表单项
   return true
@@ -213,5 +213,5 @@ defineExpose({
 })
 </script>
 <style scoped lang="scss">
-@import './index.scss';
+@import './index';
 </style>

src/typings/ProForm.d.ts

@@ -66,6 +66,7 @@ declare namespace ProForm {
     rules?: FormItemRule[]
     span?: number // 表单col宽度
     show?: (params?: any) => Promise<any> | boolean | string // 是否显示 默认显示
+    change?: (item: any, params?: any) => void // 值改变时触发
     /** 表单组件配置项 */
     compOptions: CompAttributes // 表单组件配置项
   }