YaoDocs

外观

导航栏

远程 select 控件 ​

Tag,Select控件可以使用固定的 options 选项，也可以使用数据库表中的数据作为选项。

  • props.xProps表示这是一个云属性，后端定义，前端调用。
  • props.xProps.$remote表示这是云属性中的一个远程api定义,比如 select 控件，需要定义$remote属性。
  • props.xProps.$remote.query会转换成前端xgen框架的url查询参数，可以使用变量绑定语法
json
{
  "类目": {
    "bind": "category_id",
    "view": {
      "type": "Tag",
      "props": {
        "xProps": {
          "$remote": {
            "process": "yao.component.SelectOptions",
            "query": {
              "model": "material.category",
              "label": "name",
              "value": "id"
            }
          }
        }
      }
    },
    "edit": {
      "type": "Select",
      "props": {
        "placeholder": "请输入 类目",
        "xProps": {
          "$remote": {
            "process": "yao.component.SelectOptions",
            "query": {
              "model": "material.category",
              "label": "name",
              "value": "id"
            }
          }
        }
      }
    }
  }
}

可以加上查询条件,wheres可以是一个数组，也可以是一个对象。

json
{
  "类目": {
    "edit": {
      "type": "Select",
      "props": {
        "placeholder": "请输入 类目",
        "xProps": {
          "$remote": {
            "process": "yao.component.SelectOptions",
            "query": {
              "model": "material.category",
              "label": "name",
              "value": "id",
              "wheres": [
                {
                  "column": "id",
                  "op": "ne",
                  "value": "{{id}}"
                }
              ],
              "limit": "2"
            }
          }
        }
      }
    }
  }
}

远程控件本身带有数据缓存功能，第一次读取数据后会在浏览器本地缓存。如果不需要缓存功能，需要在app.json里设置选项optional.remoteCache为false

json
{
  "xgen": "1.0",
  "name": "智慧仓库管理平台",
  "short": "智慧仓库",
  "version": "0.10.3",
  "description": "智慧仓库管理平台",
  "adminRoot": "admin",
  "optional": {
    "remoteCache": false
  },
  "menu": {
    "process": "flows.app.menu",
    "args": []
  }
}

默认情况下，如果Tag控件绑定的字段值是字符串，而不是列表。只会显示Value。为了让单个值也能搜索option中的标签值，需要增强Tag控件：

https://github.com/wwsheng009/xgen/blob/main/packages/xgen/components/view/Tag/index.tsx

源代码 ​

xProps解析源代码/yao-app-sources/yao/widgets/component/props.go

处理器yao.component.selectoptions源代码：yao-app-sources/yao/widgets/component/process.go