• 远程搜索
    • 普通用法

    远程搜索

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

    普通用法

    远程搜索 - 图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>