Blame view

ant-design-vue-jeecg/src/components/jeecg/README_JPopup.md 1.92 KB
肖超群 authored
1
2
3
# JPopup 弹窗选择组件

## 参数配置
肖超群 authored
4
肖超群 authored
5
6
7
8
9
10
11
12
13
14
15
16
| 参数           | 类型   | 必填 |说明|
|--------------|---------|----|---------|
| 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控件的值 |

使用示例
----
肖超群 authored
17
肖超群 authored
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
```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>
  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>