表单相关常见问题
怎么获取表单设计器配置
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();
多选框勾选值保存后怎么回显在表单上 / 多选框的值怎么显示在表单上
在绑定好业务字段和多选框值后,点击 “新建动作”,如下图所示:
在表单加载后的回显数据,在mounted事件里面,编辑代码处理,如下图所示:
怎么添加表单监听事件
首先选中表单设计里面的一个组件,在右侧的动作设置里面,选择 “ onchange 值发生变化” 事件,如下图所示: 然后,在动作设置的页面中,对应的事件的方法体中写入绑定的监听代码即可,如下图所示:
监听事件代码如下:
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');
}