el-form-renderer 1.12.1 发布：支持设置动态 options

前言

还在 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 哦~😋

Space