前言
还在 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 的设计理念。
原理
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 哦~😋