xaboy / form-create

:fire::fire::fire: 强大的低代码动态表单组件,通过数据驱动表单渲染,适配移动端,支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
https://www.form-create.com/
MIT License
5.97k stars 960 forks source link

如何在select的remoteMethod 远程搜索 #669

Closed lsm2208911 closed 7 months ago

lsm2208911 commented 7 months ago

@form-create/element-ui@2.5.33

我不太了解配置effect -> fetch意义,fetch是只会执行一次吗?还是像一个方法一样,可以进行调用,比如我想在remoteMethod中再次执行fetch发送请求? 如果不是,那么我想在remoteMethod中执行我项目中的axios get方法,应该怎么样写?能给一个例子吗?

[{
      "type": "select",
      "field": "schoolId",
      "title": "请输入学校名称",
      "info": "",
      "effect": {
          "fetch": {
              "action": "getSchool",
              "method": "GET",
              "data": {},
              "headers": {},
              "_parse": "function (res){\n   return res.data;\n}",
              "to": "options",
              "parse": "[[FORM-CREATE-PREFIX-function (res){\n   return res.data;\n}-FORM-CREATE-SUFFIX]]"
          }
      },
      "$required": true,
      "props": {
          "_optionType": 1,
          "clearable": true,
          "filterable": true,
          "remote": true,
          "remoteMethod": "function(query){ console.log(query) }"
      },
      "_fc_drag_tag": "select",
      "hidden": false,
      "display": true
  }]
lsm2208911 commented 7 months ago

第一步:

<form-create name="form" v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>

form-create组件上添加name属性, 然后 remoteMethod 就可以通过 formCreate.getApi('form')可以获取API

lsm2208911 commented 7 months ago

第二步: 使用form-create组件的全局API fetch,去远程搜索,具体代码:

 formCreate.fetch({
      action: 'http://localhost:8073/getSchools?currentPage=1&pageSize=10&name=' + query,
      onSuccess: function(resp){
        const list =  resp.data.map(item => {
            return {
                value: item.userId,
                label: item.departName
            }
        })
        api.updateRule('schoolId', {
          options: list
        })
      }
    })
  }
lsm2208911 commented 7 months ago

json:

"remoteMethod": " function(query) {\n const api = formCreate.getApi('form')\n formCreate.fetch({\n action: 'http://localhost:18073/getSchools?currentPage=1&pageSize=10&name=' + query,\n onSuccess: function(resp){\n  const list = resp.data.map(item => {\n return {\n value: item.userId,\n label: item.departName\n }\n })\n api.updateRule('schoolId', {\n options: list\n })\n }\n })\n }"

就是看起来很费劲,如果有更好的显示请告诉我!