el-form-renderer 1.12.1 发布:支持设置动态 options
发布于 3 年前 作者 clubadmin 1190 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

前言

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

回到顶部