form 组件高度封装
对于form 表单项一般有 基础组件(input, select 等)， 业务组件 （需要获取数据，且比较复杂， 比如Tree 选择）
思路： 通用表单项样式统一，组件prop加上可渲染的组件来定义业务表单组件。
//vue ，xComponent 传入组件名， 通过异步组件实现
<SField
label="覆盖机构" type="array" name="agencyIds" :enum="typePurposeList" xComponent="MultiAgencySelect"/>
//react
<SField render={<MultiAgencySelect/>}/>
// 根据名称加载异步组件
<template>
<component :is="asyncComponent" v-bind="$attrs" v-on="$listeners" />
</template>
<script>
const loadView = view => {
// 路由懒加载
return () => Promise.resolve(require(`@/components/business/${view}`).default);
};
// 动态异步组件
export default {
name: 'AsyncComponent',
props: {
name: {
type: String,
},
},
data() {
return {
asyncComponent: this.render(),
};
},
watch: {
name() {
this.asyncComponent = this.render();
},
},
methods: {
render() {
return loadView(this.name);
},
},
};
</script>