前言
还在 mounted 里调用接口后再用 setOptions 来更新表单的 options 数组吗🤕？现在不需要这样了！
使用 remote 属性，简单配置一下远端接口 url，即可自动发起请求并更新 options 属性🤛🏻！
甚至，任何 props 都可以通过 remote 来远程获取😃，快来看看吧！
场景
你正在愉快地使用 el-form-renderer 来维护表单。
<template>
<el-form-renderer :content="content" />
</template>
<script>
export default {
data() {
return {
content: [
{
id: 'name',
type: 'input',
label: '姓名',
rules: [{required: true, message: '请输入姓名'}]
}
]
}
}
}
</script>
所有表单相关的配置都写在一处，体验太棒了。
此时，产品经理又提了个需求，你给表单加了一项 select。
<template>
<el-form-renderer :content="content" />
</template>
<script>
export default {
data() {
return {
content: [
{/* ... */},
// 新增地址选择器
{
id: 'address',
type: 'select',
label: '地址',
options: [
{label: '广州', value: '0'},
{label: '北京', value: '1'},
]
}
]
}
}
}
</script>
只需修改一处，表单就新增好了。这就是 el-form-renderer 的魔力！
产品经理微微一笑，事情没有那么简单。地址的选项数据是随时需要更新的，所以应当由后台控制；前端从接口获取。那么稍微改一哈？
<template>
<!-- 新增属性 ref -->
<el-form-renderer :content="content" ref="formRenderer" />
</template>
<script>
import addressUrl from '@/service' // 新增
export default {
// ……
mounted() {
// ……
this.getAndSetAddressOptions() // 新增调用
},
// ……
methods: {
// ……
// 新增函数
getAndSetAddressOptions() {
this.$axios.$get(addressUrl)
.then(options => {
this.$refs.formRenderer.setOptions({
address: options
})
})
}
}
}
</script>
这，只不过是改了 options 成异步获取。就要修改这么多地方？el-form-renderer 太难用了！
解决方案：remote 属性
使用 remote 属性，可以直接在 data 里面设置动态 options
<template>
<el-form-renderer :content="content" />
</template>
<script>
import addressUrl from '@/service' // 新增
export default {
data() {
return {
content: [
{
id: 'name',
type: 'input',
label: '姓名',
rules: [{required: true, message: '请输入姓名'}]
},
{
id: 'address',
type: 'select',
label: '地址',
// 使用 remote api 代替 options
remote: {url: addressUrl}
}
]
}
}
}
</script>
重构的结果，代码甚至比原来还要少！
另外，这样写还有一个好处：避免了 逻辑关注点过于分散 的问题。而这也是 Vue@3.0 版本的 Composition Api 的设计理念。
image.png
原理
remote 在内部做了什么？
export default {
watch: {
remote({url}) {
this.$axios.get(url).then(resp => setOptions(id, resp.data))
}
}
}
核心逻辑就这么简单。默认情况下，el-form-renderer 依赖全局注册的 axios 组件去请求数据，然后用内部的 setOptions 方法更新该表单项配置的 options 属性。简单归简单，带来的好处就是，现在所有的表单配置都可以写回一处，不用再分散到各个方法里了！
高阶用法
除了 url 外，remote 属性还接受更进一步的定制，适用各种场景！
onResponse
假如接口返回的数据需要进一步处理再 setOptions 呢？可以使用 onResponse 钩子来实现这个功能。
{
remote: {
url,
onResponse: resp => resp.map(item => ({label: item.l, value: item.v}))
}
}
request
不想用 axios 怎么办？可以通过 request 属性来完全掌控请求过程。数据来源可以是任何资源！
{
remote: {
request: async () => {
await this.$store.dispatch('action')
return this.$store.state.data
}
}
}
prop
一般来说，remote 是给 el-select、el-checkbox-group 和 el-radio-group 组件，远程设置其 options 选项来使用的。但有些时候，表单项组件的某些属性同样有可能从远程获取，比如 el-cascader 的options 属性。
查看 element 官方文档，可以看到与 el-select 等上述组件用 el-option 组件来写选项不同，el-cascader 是直接传 options 属性来生成选项的
{
type: 'cascader',
el: {
// options: [] // 原本传给 el-cascader options 属性的位置，现在由 remote 所取代
},
remote: {url}
}
是的，你没看错：当 type 是 cascader 时，remote 获取的数据会自动传给 el-cascader 的 options 属性！这是组件层面为 el-cascader 做的优化。
如果你希望自定义选择将 remote 获取的数据放到组件的哪一个属性上，你可以使用 prop 属性（默认值 options），来适配你自己的场景。
{
type: 'transfer',
remote: {
url,
prop: 'data' // 远程获取 el-transfer 的 data 属性
}
}
结语
这里还有更多的 remote 示例。如果你觉得 el-form-renderer 好用，欢迎来 GitHub 仓库提 issue、pr 或者点个 star 哦~😋
网友评论