67 lines
3.0 KiB
Markdown
67 lines
3.0 KiB
Markdown
# 如何在表单二开中定义字段
|
||
首先，需要按照文档**1_拆分表单**将表单拆开，分解成独立字段。
|
||
|
||
下面的代码为一个支持多层加载的级联选择器，同时值和文字描述分开存储，不会在表单打开时加载数据：
|
||
```vue
|
||
<!-- 非SimpleFormItem的组件需要自己包一层FormItem才有标准表单样式 -->
|
||
<FormItem :labelCol="{ style: { width: '120px' } }" label="级联本体" name="jiLianBenTi7352">
|
||
<!-- 实际存储值的是a-input，因为取值是校验方法的返回值，非antd表单组件无法取到值 -->
|
||
<a-input v-model:value="formModel.jiLianBenTi7352" style="display: none"/>
|
||
<!-- 当一个formitem里有多个表单字段时，不需要取值的用form-item-rest包起来 -->
|
||
<a-form-item-rest>
|
||
<a-cascader v-model:value="cascadeValue" :load-data="onCascadeLoad" :options="cascadeData" placeholder="请选择" @change="onCascadeChange">
|
||
<!-- 这里是选择器的触发链接，如果已经有选择值了，就显示中文结果 -->
|
||
<!-- 就算是没有加载选项部分，因为文字部分已经存库了，已选内容也不为空 -->
|
||
<a href="#">{{ formModel.jiLianWenZi5194 || '请选择' }}</a>
|
||
</a-cascader>
|
||
</a-form-item-rest>
|
||
</FormItem>
|
||
```
|
||
这里特别注意下，因为cascade的值为数组，而数组在数据库是不能存储的，所以这里cascadeValue为数组值，a-input里存储的为逗号分开的id。
|
||
|
||
特别注意，FormItem在本框架里获取值依靠form的validate方法，因此FormItem里必须有**antd vue的表单元素**，如果为纯手动开发的组件，建议用一个a-input储存表单值。
|
||
|
||
脚本部分
|
||
```vue
|
||
<script>
|
||
export default {
|
||
setup(props, ctx) {
|
||
// 参考表单拆分，这里省略
|
||
},
|
||
mounted() {
|
||
this.getCascadeData();
|
||
},
|
||
methods: {
|
||
getCascadeData: function (parent = {}) {
|
||
defHttp
|
||
.get({
|
||
url: '/system/dev-demo/cascade-data',
|
||
params: {
|
||
level: parent.level
|
||
}
|
||
})
|
||
.then((data) => {
|
||
if (!parent.level) {
|
||
this.cascadeData = data;
|
||
} else {
|
||
parent.children = data;
|
||
}
|
||
});
|
||
},
|
||
|
||
onCascadeChange: function (value, selectedOptions) {
|
||
// 将级联选择器的文字和值分别赋值到2个字段保存
|
||
this.formModel.jiLianWenZi5194 = selectedOptions.map((item) => item.label).join(' > ');
|
||
this.formModel.jiLianBenTi7352 = selectedOptions.map((item) => item.value).join(',');
|
||
},
|
||
|
||
onCascadeLoad: function (selectedOptions) {
|
||
// 具体参考官方文档，级联选择器的返回值为一组数组，所以要取最后一级的值，以加载下一层选项
|
||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||
this.getCascadeData(targetOption);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
```
|