先说需求
element select分页只能当前页搜索 我们需要不止再当前页可搜索 + 滚动分页
如图
<el-select v-loadmore="loadMormodle" v-model="form.targetModelName" placeholder="请选择模型名称" @change="getModelProp" :popper-append-to-body="false" filterable clearable data-type="model"> <el-option v-for="(item,index) in modelNameArr" :key="index" :label="item.confModelName" :value="item.confModelID" /> </el-select>
绑定 v-loadmore="loadMormodle" :popper-append-to-body="false" data-type="model"（自定义指令）
首先在页面重定义that = null <script>下面
data 中定义变量 isNeedmodle: true,
created 中重新定义 taht=this
然后自定义指令
directives: { loadmore: { bind(el, binding) { console.log(el,binding); const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll', function () { const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight if (CONDITION) { let type = el.getAttribute('data-type') if (type === 'model') { console.log(that); console.log(that,that.modelName,'=='); that.modelName.pageNum++ that.total1 === that.modelName.pageNum ? that.isNeedmodle = false : true } binding.value() } }) } } },methods 方法哩
loadMormodle() { if (this.isNeedmodle) { this.getModelName() //这个是获取下拉框列表的方法 } },
这个方法里记得push
getModelName() { this.modelName.model_name_list = [] if (this.form.ruleTypeId === 'inherit') { this.modelName.model_name_list.push(this.form.confModelName) } getListApi(this.modelName).then(res => { if (res.code == 200) { this.modelNameArr.push(...res.data) this.total1 = res.total } }) },
