41 lines
1.7 KiB
Plaintext
41 lines
1.7 KiB
Plaintext
查询窗体添加步骤：
|
||
<query-params
|
||
ref="query"
|
||
:form="queryFormConfig"
|
||
@handleQuery="handleQuery"
|
||
@getTableData="getTableData"
|
||
@resetQuery="resetQuery"
|
||
>
|
||
</query-params>
|
||
首先删掉原来的查询窗体的部分
|
||
queryFormConfig为查询窗体配置，写在计算属性中,通过控制queryFormConfig的值来控制要显示的属性列表（controlList）和默认值(defaultList),详见每一行后的注释 D:\micro202201171617MONDAY\src\views\tool\example\index.vue
|
||
然后添加函数 getQueryParams()
|
||
{
|
||
let pageSize=this.queryParams.pageSize
|
||
let pageNo=this.queryParams.pageNo
|
||
this.queryParams=this.$refs.query.getQueryParams()//返回子组件的queryParams
|
||
this.queryParams.pageSize=pageSize
|
||
this.queryParams.pageNo=pageNo
|
||
//取得子组件的queryParams并且与原来的pagesize pageNo合并
|
||
},
|
||
在handleQuery里面加上一行 this.getQueryParams()//加上这一句
|
||
在mounted最后一行 加入 this.$refs.query.init()
|
||
|
||
|
||
事件：
|
||
1.
|
||
FAQ：
|
||
1.解决查询条件首次加载的刷新问题：
|
||
queryFormConfig里写 key:this.key//解决查询条件首次加载的刷新问题
|
||
vue的data里面写key:0,//解决查询条件首次加载的刷新问题
|
||
然后this.key++ //解决查询条件首次加载的刷新问题
|
||
|
||
2.change事件:在<query-params 后加入 @xxxChange=“xxxChange” xxx为对应的prop名
|
||
|
||
|
||
|
||
3.强制刷新：this.key++;
|
||
this.$nextTick(()=>{this.$refs.query.refresh();})
|
||
4.记忆模式：在config中有两个参数storageMode:true, storageKey用于记忆模式(//storageMode:true,//记忆模式，开启后每次查询会存储到localstorage中，存储名为storageKey)
|
||
|