## 介绍 之前推出的远程自定义页面功能已经满足很多用户对特殊页面的自定义需求，但是考虑到自定义页面其实所要做的工作挺多，经过调查发现，很多用户使用远程自定义页面是因为商城多规格等特殊的表单编辑需求，其实仅仅需要一个能自定义的组件，并不需要对整个页面进行自定义。 针对此需求我们特别研发了自定义Form组件功能，以后只需要定义一个组件即可，更加便捷方便。  注意：需要1.0以上版本支持 远程Form组件功能使用步骤 1.将一个Vue文件放在Public目录下 2.直接在后台代码调用 只需要在第三个参数指定为remote，同时设置outUrl字段为vue组件的URL路径即可。 ``` // 远程Form组件测试 ->addFormItem('priceList', '多规格价格', 'remote', '', [ 'outUrl' => 'http://localhost/price.vue', 'placeholder' => '' ]) ``` 3.nginx配置文件增加 ``` add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, OPTIONS'; if ($request_method = 'OPTIONS') { return 204; } ``` 4.后台访问即可自动渲染 Vue文件内容参考： ``` <style> .example { color: red; } </style> <template> <div class="price-comp"> 这是自定义远程Form组件 <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </div> </template> <script> export default { props: { // 表单组件的value value: { type: [Object, Array, String, Number], default: () => { return {}; } }, pitem: { type: Object, default: () => { return {} } } }, data() { return { formValue: null } }, watch: {}, mounted() { this.formValue = this.value; this.loadData(); }, methods: { async loadData() { // 将修改的值回传给上级表单 this.$emit('input', '这是修改后的新值'); } } } </script> ``` ## 数据绑定 默认云后台会将该表单项的默认值以v-model的形式绑定到组件上，只需要用$this.value即可获取。 如果想回传修改后的值给云后台，执行this.$emit('input', 新值)。这里了解vue的都应该一看就明白，是典型的标准v-model应用。 ``` export default { props:{ value: { type: Object, default: () => { return {} } } } ... } ```