在事件中发送网络请求数据保存在哪
其实他就是保存在event.data.responseResult中，如果配置了"outputVar"这个属性，那么将保存在这个属性中的变量里。
{ "type": "form", "id": "form_data_001", "title": "用户信息", "body": [ { "type": "input-text", "label": "名称", "name": "age", "disabled": false, "mode": "horizontal" }, { "type": "input-text", "label": "作者", "name": "author", "disabled": false, "mode": "horizontal" } ], "actions": [ { "type": "button", "label": "去获取表单数据", "primary": true, "wrapWithPanel": false, "onEvent": { "click": { "actions": [ { "actionType": "ajax", "args": { "api": "/api/users/del" }, // 如果配置了这个属性，那么它将表示返回的信息放在myResult中 // 如果没有配置这个属性，那么么人放置在responseResult属性中 // "outputVar": "myResult" }, { "actionType": "setValue", "componentId": "form_data_001", "args": { // "value": "${event.data.myResult.other}" "value": "${event.data.responseResult.other}" } }, { "actionType": "toast", "args": { // "msg": "${event.data.myResult | json}" "msg": "${event.data.responseResult | json}" } } ] } } } ] },
网络异常，图片无法展示
|
阻止默认行为
在动作（actions）中配置这个属性为true即可。
"preventDefault": true
表单验证
表单验证的需求很简单，当用户在没有填写必填项时给出提示。需要我们手动定制提示内容。
当提交表单时，如果验证不通过toast中提示的内容。
// 验证的信息 "messages": { "validateFailed": "请仔细检查表单规则，部分表单项没通过验证" },
表单项的验证规则和自定义错误提示
{ "type": "input-text", "name": "test", "label": "必填", required: true, // 表单验证规则 validations: { isRequired: true }, // 验证错误是提示的内容 "validationErrors": { "isRequired": "请填写test" } },
在筛选数据时，输入(选中)表单值时，将会触发筛选请求，而无需点击筛选按钮（重点）
因为看我们公司的后台管理系统都有这样一个需求，然后就想着也做一下。但是对于这种高度封装的库，不一定可以实现。于是就试试了。
💢💢💢 星期五晚上测试了很久没有实现，星期六 2022-9-17 来再次尝试。
因为select,input-text这个组件也暴露了一些事件和动作，想着实现这种也很简单，就是监听change事件，然后发送ajax动作。并在此刷新页面，做筛选请求。但是这又是那种问题。在ajax动作中使用reload是不生效的。但是官网明确说了是可以生效的。看这里官方案例
然后就想着使用setValue动作吧，把值更新过去，但是也是无济于事的。根本没有变化。
onEvent: { change: { actions: [ // 直接在这里调用submit呢 啥也不行 // { // actionType: "submit", // }, // { // actionType: "ajax", // reload: "loginclosecrud?closestyle=${closestyle}&productid=${productid}", // args: { // api: { // url: "/api/logindata", // method: "get", // data: { // // 在这里可以这样获取值 // "closestyle": "${event.data.value}", // productid: "${productid}" // } // }, // } // }, { // 这里刷新的时候会携带很多无用的信息 // 这里刷新的时候会携带很多无用的信息 actionType: "reload", componentId: "crudId", // reload也可以写args参数 args: { closestyle: "${event.data.value}", productid: "${productid}" } }, // { // actionType: "setValue", // componentId: "crudId", // args: { // value: { // count: "${event.data.responseResult.count}", // rows: "${event.data.responseResult.rows}" // } // } // }, // { // actionType: "toast", // args: { // msg: "${event.data.value | json}" // } // } ] } }
讲一下自己试错的过程吧
- 通过ajax动作，获取数据，并设置reload属性绑定组件的name属性
// { // actionType: "ajax", // reload: "loginclosecrud?closestyle=${closestyle}&productid=${productid}", // args: { // api: { // url: "/api/logindata", // method: "get", // data: { // // 在这里可以这样获取值 // "closestyle": "${event.data.value}", // productid: "${productid}" // } // }, // } // },
上面的做法发现没有刷新指定的组件。
- 通过setValue动作，发送请求回来的数据。
// { // actionType: "setValue", // componentId: "crudId", // args: { // value: { // count: "${event.data.responseResult.count}", // rows: "${event.data.responseResult.rows}" // } // } // },
上面这种做法，也是没有更新界面数据的。
- 然后直接使用reload动作，来去刷新界面。
{ // 这里刷新的时候会携带很多无用的信息 actionType: "reload", componentId: "crudId", },
但是查看控制台，发现，目标组件刷新时会携带当前数据域 （event.data） 中的所有数
据。
网络异常，图片无法展示
|
- 然后尝试了一下在刷新目标组件的时候发送需要的数据
{ // 这里刷新的时候会携带很多无用的信息 // 这里刷新的时候会携带很多无用的信息 actionType: "reload", componentId: "crudId", // reload也可以写args参数 args: { closestyle: "${event.data.value}", productid: "${productid}" } },
这样就实现了这个需求。
之所以之前没有尝试这种写法，是因为官方文档中，没有指出说reload动作可以携带args。
网络异常，图片无法展示
|
这里还需要注意一下，在args中获取数据的时候，如果是在当前表单项获取数据需要通过event.data.value，如果获取其他表单项的值时，直接通过模板语法获取表单的name属性即可。
args: { // 获取当前表单项值 closestyle: "${event.data.value}", // 获取其他表单项值 productid: "${productid}" }
删除按钮的二次确认模态框的修改
原生的太丑了。想要一个轻提示。
网络异常，图片无法展示
|
为啥官方不提供一个可以定制的入口呢？我是没有找到，今天看源码也没有找到。
今天（2022-9-15）发现了解决办法，不过不是tooltip组件，而是通过一个定制的弹窗来做二次确认，而不是使用它的confirmText属性。
body: { type: "button", level: "link", className: "text-danger", label: "删除", "onEvent": { "click": { "actions": [ { "actionType": "dialog", "dialog": { "type": "dialog", "title": "", "body": [ { "type": "tpl", "tpl": "<p>确定要删除吗？</p>", "inline": false } ], "onEvent": { "confirm": { "actions": [ { "actionType": "ajax", args: { api: { method: "get", url: "/api/users/del" } } } ] }, "cancel": { "actions": [ { "actionType": "toast", "args": { "msg": "删除失败" } } ] } } } } ] } } }
网络异常，图片无法展示
|
2022-9-15测试发现，删除后不能联动crud组件重新获取数据，这就很无语好吧。然后想着通过reload属性去关联crud组件，来刷新crud组件，让其重新获取数据，凡是无济于事。
"confirm": { // 配置监听的动作 event.data.xxx "actions": [ { "actionType": "ajax", // 在这里增加一个reload去关联crud组件。 "reload": "loginclosecrud", args: { api: { method: "get", url: "/api/logindata/delete", data: { id: "${id}", } } } } ] },
这里可以参考这个。请求成功后，刷新目标组件。官方网站可是说了可以，但是就是不行。
解决方案一
但是在一个交流群里，看见了一位老哥的操作，就试了试。结果还真的可以。
{ "label": "删除", "type": "button", loading: false, "level": "link", "className": "text-danger", actionType: "dialog", dialog: { type: "dialog", "title": "", actions: [ { type: "button", actionType: "cancel", label: "取消" }, { type: "button", actionType: "confirm", label: "确认", level: "danger" } ], body: [ { type: "tpl", tpl: "<p> 确定要删除吗？</p>" }, { type: "form", api: { url: "/api/logindata/delete", method: "get", data: { id: "${id}", } } } ] },
解决方案二
今天2022-9-16，今天看官网发现了一个可以更新页面的动作，并且联动其他组件。
// 这里加上一个reload动作，并绑定crud组件的id { actionType: "reload", // 写刷新页面的id componentId: "crudId" }
就是通过制定目的组件的id属性。
"onEvent": { // 事件名称 "confirm": { // 配置监听的动作 event.data.xxx "actions": [ { "actionType": "ajax", args: { api: { method: "get", url: "/api/logindata/delete", data: { id: "${id}", } }, // 自定义请求成功或者失败的提示信息。toast。这个只是网络请求中的成功或者失败， // 而不是我们自己点击取消或者确认按钮的成功或者失败。 "messages": { "success": "成功了！欧耶", "failed": "失败了呢。。" } } }, // 这里加上一个reload动作，并绑定crud组件的id { actionType: "reload", // 写刷新页面的id componentId: "crudId" } ] }, // 点击取消按钮的时候触发 "cancel": { "actions": [ { "actionType": "toast", "args": { "msg": "删除失败" } } ] } }
页面加载的loading图标修改。
网络异常，图片无法展示
|
加载按钮太暗。
这个可以通过设置css变量来改变
/* 统一修改内置的css变量 */ :root { /* 加载时的背景图片 */ --Spinner-bg: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibG9hZGluZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC41MDAwMDAsIDAuNTAwMDAwKSI+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNjMiIGhlaWdodD0iNjMiPjwvcmVjdD4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hOWkh+S7vS02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjk4MDAwMCwgMC43ODAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJmcmFtZSIgc3Ryb2tlPSIjMjQ2OEYyIiBzdHJva2Utd2lkdGg9IjMuMiIgcG9pbnRzPSIyNy41MiA1LjEyIDQ5LjY5MDI1MDMgMTcuOTIgNDkuNjkwMjUwMyA0My41MiAyNy41MiA1Ni4zMiA1LjM0OTc0OTY2IDQzLjUyIDUuMzQ5NzQ5NjYgMTcuOTIiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCAxNjAiIHN0cm9rZS1kYXNob2Zmc2V0PSIxNjAiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTEiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iLjQ1cztmcmFtZTIuZW5kIiBkdXI9Ii45cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIxNjAiIHRvPSItMTYwIiBmaWxsPSJmcmVlemUiICBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTIiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iZnJhbWUxLmVuZCIgZHVyPSIuOXMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMTYwIiB0bz0iMTYwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICA8L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUxIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGN4PSIyNy41MiIgY3k9IjQuOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDI2IiB0bz0iMCAwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gaWQ9ImNpcmNsZTF0d28iIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYmVnaW49ImNpcmNsZTFvbmUuZW5kICsgLjcycyIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjAgMCIgdG89IjAgMjYiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlMiIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MC4yNDAwMDAsIDE3LjI4MDAwMCkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTE3LjI4MDAwMCkgIiBjeD0iNTAuMjQiIGN5PSIxNy4yOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMm9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMnR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSItMjIuNSAxMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUydHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUyb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUzIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjI0MDAwMCwgNDMuMjAwMDAwKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNTAuMjQiIGN5PSI0My4yIiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzb25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGUzdHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209Ii0yMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUzb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAtMTMiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlNCIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMjcuNTIiIGN5PSI1Ni42NCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIC0yNiIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUxdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUxb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIwIC0yNiIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU1IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCA0My4yMDAwMDApIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC00LjgwMDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNC44IiBjeT0iNDMuMiIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlNXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIyMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU1dHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGU1b25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIyMi41IC0xMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU2IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCAxNy4yODAwMDApIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtNC44MDAwMDAsIC0xNy4yODAwMDApICIgY3g9IjQuOCIgY3k9IjE3LjI4IiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU2b25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGU2dHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjIyLjUgMTMiIHRvPSIwIDAiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNnR3byIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iY2lyY2xlNm9uZS5lbmQgKyAuNzJzIiBkdXI9Ii41NHMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMCAwIiB0bz0iMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") }
进入页面时，不希望立刻请求
由于数据量过大，我们希望进入页面的时候，不去请求数据，只有当用户点击了查询按钮时，采取请求数据。
对于crud组件来说，这个很方便。只需要配置这个属性即可。
// 只针对有filter时，当点击了查询时，才会去请求数据 // 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 initFetch: false,
注意：这个属性只在设置了filter属性时有效。
目前想要解决的问题但是没有找到方法
定制一个没有太多内容的404页面。
网络异常，图片无法展示
|
404页面不是一个完整的，他只是在内容区域展示404。
