Skip to content

表单相关常见问题

怎么获取表单设计器配置

vue
<template>
    <el-container
        v-loading="loading"
        :element-loading-text="$t('正在保存中')"
        :style="style"
        class="newForm-container"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-spinner="el-icon-loading"
    >
        <el-aside class="formaside">
            <fm-generate-form
                id="printTest"
                ref="generateForm"
                :data="formJson"
                :edit="edit"
                :remote="remoteFuncs"
                style="margin: auto"
            >
            </fm-generate-form>
        </el-aside>
    </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const generateForm = ref();
generateForm.value.getJSON();
</script>

怎么获取表单组件对象

vue
## 获取组件对象方法
let customWord = generateForm.value.getComponent('custom_word');
if (customWord != null) {
	customWord.openWord();//调用组件方法
}

怎么获取表单字段数据

vue
generateForm.value.getValue('fieldName');

怎么修改表单字段数据

vue
generateForm.value.setData({ fieldName: 'value' });

怎么设置字段权限

vue
//权限表单,默认开始禁用所有字段
generateForm.value.disabledAll(true);
//移除其他字段必填项验证
let writeField = ['fieldName'];
generateForm.value.clearValidate(writeField); 
//开启字段填写
generateForm.value.disabled(writeField, false); 
//禁用字段填写
generateForm.value.disabled(writeField, true);
//移除所有字段必填项验证
generateForm.value.clearAllValidate();

多选框勾选值保存后怎么回显在表单上 / 多选框的值怎么显示在表单上

在绑定好业务字段和多选框值后,点击 “新建动作”,如下图所示:

form1

在表单加载后的回显数据,在mounted事件里面,编辑代码处理,如下图所示:

form2

怎么添加表单监听事件

首先选中表单设计里面的一个组件,在右侧的动作设置里面,选择 “ onchange 值发生变化” 事件,如下图所示: form3 然后,在动作设置的页面中,对应的事件的方法体中写入绑定的监听代码即可,如下图所示: form4 监听事件代码如下:

js
let shifoucanhui = this.getValue('shifoucanhui');
this.eventBus('y9_shifoucanhui', {"shifoucanhui":shifoucanhui});

在vue页面的表单组件里面加上如下代码监听事件: 如果表单中组件的值发生变化后,就可以在mounted里面监听到这个事件了。

vue
mounted () {
    EventBus.$on('y9_shifoucanhui', (data) => {//监听是否参会复选框勾选情况
          this.$nextTick(() => {
            //处理代码
          });
        });
    }

在生命周期的beforeDestroy,需要关闭这个事件

vue
beforeDestroy () {
	EventBus.$off('y9_shifoucanhui');
}

Released under the GPL-3.0 License.