JPopup 弹窗选择组件 === 1.参数配置 | 参数 | 类型 | 必填 |说明| |--------------|---------|----|---------| | placeholder |string | | placeholder | | code |string | | online报表编码 | | orgFields |string | | online报表中显示的列,多个以逗号隔开 | | destFields |string | | 回调对象的属性,多个以逗号隔开,其顺序和orgFields一一对应 | | field |string | | v-model模式专用,表示从destFields中选择一个属性的值返回给当前组件 | | triggerChange |Boolean | | v-decorator模式下需设置成true | | callback(事件) |function | | 回调事件,v-decorator模式下用到,用于设置form控件的值 | |multi |Boolean | | 是否支持多选,默认值false | |param |object | | 动态参数对象,在online报表参数里手动新增记录,然后就可以在自己页面里传递同名参数,作为数据查询条件,如果是字符串类型需要设置成**双引号内套单引号**的格式 如{name:"'admin'"} | 2.使用示例 ![输入图片说明](https://static.oschina.net/uploads/img/201905/25161102_kY8F.png "在这里输入图片标题") ---- ```vue <template> <a-form :form="form"> <a-form-item label="v-model模式指定一个值返回至当前组件" style="width: 300px"> <j-popup v-model="selectValue" code="user_msg" org-fields="username,realname" dest-fields="popup,other" field="popup"/> {{ selectValue }} </a-form-item> <a-form-item label="v-decorator模式支持回调多个值至当前表单" style="width: 300px"> <j-popup v-decorator="['one']" :trigger-change="true" code="user_msg" org-fields="username,realname" dest-fields="one,two" @callback="popupCallback"/> {{ getFormFieldValue('one') }} </a-form-item> <a-form-item label="v-decorator模式被回调的值" style="width: 300px"> <a-input v-decorator="['two']"></a-input> </a-form-item> </a-form > </template> <script> import JPopup from '@/components/jeecgbiz/JPopup' export default { components: {JPopup}, data() { return { form: this.$form.createForm(this), selectValue:"", } }, methods:{ getFormFieldValue(field){ return this.form.getFieldValue(field) }, popupCallback(row){ this.form.setFieldsValue(row) } } } </script> ```