README_JPopup.md 1.92 KB

JPopup 弹窗选择组件

参数配置

参数 类型 必填 说明
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控件的值

使用示例

<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>
  export default {
    data() {
      return {
        form: this.$form.createForm(this),
        selectValue:"",
      }
    },
    methods:{
      getFormFieldValue(field){
        return this.form.getFieldValue(field)
      },
      popupCallback(row){
        this.form.setFieldsValue(row)
      }
    }
  }
</script>