远程搜索

当你的下拉框数据量很大的时候,你可以启动远程搜索

普通用法

远程搜索 - 图1

配置remotetrue即可开启远程搜索,其中dicUrl{ {key}}为用户输入的关键字,其他字典用法和参数保持不变,由于没有真实的接口,看控制台的network

  1. <avue-form :option="option" v-model="form" @submit="handleSubmit"></avue-form>
  2. <script>
  3. const baseUrl = 'https://cli2.avue.top/api/area'
  4. export default {
  5. data(){
  6. return {
  7. form:{
  8. province: '110000',
  9. },
  10. option: {
  11. column: [
  12. {
  13. label: '省份',
  14. prop: 'province',
  15. type: 'select',
  16. remote: true,
  17. props: {
  18. label: 'name',
  19. value: 'code'
  20. },
  21. dicUrl: `${baseUrl}/getProvince/{ {key}}`,
  22. rules: [
  23. {
  24. required: true,
  25. message: '请选择省份',
  26. trigger: 'blur'
  27. }
  28. ]
  29. }
  30. ]
  31. }
  32. }
  33. },
  34. methods:{
  35. handleSubmit(form){
  36. this.$message.success(JSON.stringify(this.form))
  37. }
  38. }
  39. }
  40. </script>