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