iview远程筛选功能代码

最新推荐文章于 2024-04-02 09:44:36 发布

原创

最新推荐文章于 2024-04-02 09:44:36 发布 · 499 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#view design

本文介绍了如何改造iView的筛选功能，以支持远程数据请求和分页，使其符合实际项目需求。通过改造，实现了在筛选时动态从服务器获取数据，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iview筛选功能不可分页，不可请求接口，不满足实际使用需求，特此改造：

item.renderHeader = (h, params)=>{
     return h('Dropdown',{props:{trigger:"click",transfer:true}},[
            h('div',[
                h('Strong','煤种'),
                h('Icon',{props:{type:'ios-funnel'}, }),
            ]),
            h('DropdownMenu',{slot:'list',transfer:true},[
              h('Checkbox-group',{style:{marginBottom:'5px'},props:{value:this.coalObj},
                 on:{'on-change':(val)=>{this.coalObj=val}}},this.coalList.map((val)=>{
                  return h('div',{style:{marginLeft:'10px',marginBottom:'1px'},
                                  on:{'click'(event){event.stopPropagation()}}},[
                      h('Checkbox',{props:{label:val.label}},val.label)])  })),
            h('div',
                {style:{paddingTop:'5px',display:'flex',justifyContent:'center',borderTop:'1px solid #eee'}},
[h('Button',{props:{type:'primary',size:'small'},style:{margi