el-select展示流程
2021-12-06 15:46:25 0 举报
el-select的二次封装,支持数据加载,搜索,清空,默认展示10条,disabled值展示当前对应的值。
作者其他创作
大纲/内容
el-option展示默认10条数据滚动加载数据
组件内部进行init调用,搜索v-modle对的的值,unshift添加到数组的首位,展示10条数据
初始化
展示el-select组件
初步展示10条,第一条展示当前v-mode对应的值,改变赋值的数组,找到的对应值,放入第一条。方式:find--》splice---》unshift放在首位编辑和不可编辑,处理方法可以合并处理-------------- 新增-编辑选中的放入 o-option当前首页
搜索
进行搜索,只能自定义搜索方法
el-select全局封装
搜索查找的值,要重外面传入,对应key,value
1.全局组件el-select 单选props的值- 原数组- v-model.trim()的值- o-option的key,value值 (默认value,label || 自定义传入的)- html:- :class 自定义class- :filter-method=\"filterMethod(item.templateType)\" 自定义搜索- v-loadmore=\"loadMore(rangeNumber)\"- v-bind=\"$attrs\" v-on=\"listeners\"正常流程:1.常规展示2.搜索3.情况: el-option的数据要先----》 v-model展示
组件内部进行init调用,搜索v-modle对的的值,赋值给当前el-option上面,只有当前一条数据
disabled不可编辑
搜索展示搜索的数据,进行加载展示,搜索要进行防抖处理
编辑状态
清空搜索触发change方法
收藏
0 条评论
回复 删除
下一页