**JPopup 彈窗選擇組件** [TOC] ## 組件參數 | 參數 | 類型 | 必填 |說明| |--------------|---------|----|---------| --- | | placeholder |string | | placeholder | | code |string | 是| online報表編碼 | | sorter | String |否 | 默認排序列，使用方法：列名=desc\|asc。例：`age=asc` | | width| number| 否| 寬度 | | |multi |Boolean |否 | 是否支持多選，默認值false || |param |object |否 | 動態參數對象，在online報表參數里手動新增記錄，然后就可以在自己頁面里傳遞同名參數，作為數據查詢條件，如果是字符串類型需要設置成**雙引號內套單引號**的格式 如{name:"'admin'"} | | spliter|string|否 | 分隔符，默認`,`，只對數據庫不是`,`分割的值有用，最終數據庫保存還是`,`| | groupId|string|否 | 分組id| | setFieldValue|function|否 | 設置表單value值的方法，表單模式下使用 | | formElRef|object |否 | 表單組件實例,v-model模式下使用 | | fieldConfig|array| 否| popup回調參數值配置，具體見下| fieldConfig配置： | 參數 | 類型 | 說明 |--------------|---------|---------| | source |string | pop彈窗列表中的取值參數 | | target |string | 返回給表單中的目標參數，多個逗號分隔 | ## 效果展示  ## 使用示例 ```vue <template> <BasicForm :labelWidth="200" :schemas="schemas" :actionColOptions="{ span: 24 }" @submit="handleSubmit" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { BasicForm, FormSchema,JPopup, FormActionType} from '/@/components/Form' import { useMessage } from '/@/hooks/web/useMessage'; const schemas: FormSchema[] = [ { field: 'pop', component: 'JPopup', label: 'JPopup示例', helpMessage: ['component模式'], colProps: { span: 8, }, componentProps: ({ formActionType }) => { let { setFieldsValue } = formActionType return { setFieldsValue, placeholder: '請選擇', code: 'report_user', fieldConfig: [{ source: 'username', target: 'pop' }, { source: 'realname', target: 'popback' }], multi: true, } }, }, { field: 'pop', component: 'Input', label: 'popup回調值', colProps: { span: 8, }, }, { field: 'popback', component: 'Input', label: 'popback回調值', colProps: { span: 8, }, }] export default defineComponent({ components: { BasicForm,JPopup }, setup() { const { createMessage } = useMessage(); return { schemas, handleSubmit: (values: any) => { createMessage.success('click search,values:' + JSON.stringify(values)); } }; } }); </script>