JPopup 弹窗选择组件

1.参数配置

参数类型必填说明
placeholderstringplaceholder
codestringonline报表编码
orgFieldsstringonline报表中显示的列,多个以逗号隔开
destFieldsstring回调对象的属性,多个以逗号隔开,其顺序和orgFields一一对应
fieldstringv-model模式专用,表示从destFields中选择一个属性的值返回给当前组件
triggerChangeBooleanv-decorator模式下需设置成true
callback(事件)function回调事件,v-decorator模式下用到,用于设置form控件的值

2.使用示例

  1. <template>
  2.   <a-form :form="form">
  3.     <a-form-item label="v-model模式指定一个值返回至当前组件" style="width: 300px">
  4.       <j-popup
  5.         v-model="selectValue"
  6.         code="user_msg"
  7.         org-fields="username,realname"
  8.         dest-fields="popup,other"
  9.         field="popup"/>
  10.       {{ selectValue }}
  11.     </a-form-item>
  13.     <a-form-item label="v-decorator模式支持回调多个值至当前表单" style="width: 300px">
  14.       <j-popup
  15.         v-decorator="['one']"
  16.         :trigger-change="true"
  17.         code="user_msg"
  18.         org-fields="username,realname"
  19.         dest-fields="one,two"
  20.         @callback="popupCallback"/>
  21.       {{ getFormFieldValue('one') }}
  22.     </a-form-item>
  24.     <a-form-item label="v-decorator模式被回调的值" style="width: 300px">
  25.       <a-input v-decorator="['two']"></a-input>
  26.     </a-form-item>
  29.   </a-form >
  30. </template>
  32. <script>
  33.   import JPopup from '@/components/jeecgbiz/JPopup'
  34.   export default {
  35.     components: {JPopup},
  36.     data() {
  37.       return {
  38.         form: this.$form.createForm(this),
  39.         selectValue:"",
  40.       }
  41.     },
  42.     methods:{
  43.       getFormFieldValue(field){
  44.         return this.form.getFieldValue(field)
  45.       },
  46.       popupCallback(row){
  47.         this.form.setFieldsValue(row)
  48.       }
  49.     }
  50.   }
  51. </script>