el-select-loadmore
时间: 2023-08-29 22:02:46 浏览: 136
el-select-loadmore是Element UI库中的一个下拉选择组件。该组件具有加载更多的功能,可以用于在下拉列表中展示大量选项时进行分页加载。
使用el-select-loadmore,我们可以通过设置属性来实现加载更多的功能。主要的属性包括:
1. loadmore-text:设置加载更多的按钮文本,默认为"加载更多"。
2. loadmore-method:设置加载更多的方法,该方法会在点击加载更多按钮时触发。在方法中,我们可以从服务器获取下一页的数据,并使用append方法将新的选项添加到下拉列表中。
3. loadmore-visible:设置加载更多按钮的可见性。当下拉列表中的选项超过一定数量时,加载更多按钮将显示出来。
除了加载更多的功能,el-select-loadmore还具有常规的下拉选择功能,例如搜索、多选等。可以通过设置其他属性来实现这些功能。
总的来说,el-select-loadmore是一个方便实用的下拉选择组件,适用于需要展示大量选项的场景,并提供了简单的分页加载功能。
相关问题
<el-select clearable filterable v-model.lazy="scope.row.goods_id" v-el-select-loadmore="loadMore" :filter-method="selectFilter" :popper-append-to-body="false" @visible-change="selectVisible"> <el-option v-for="goods in merchandiseNameData_.slice(0, range)" :key="goods.data" :label="goods.num" :value="goods.data"> </el-option> </el-select>获取不到模糊搜索的值
根据你提供的代码,`v-model.lazy="scope.row.goods_id"` 绑定了 `el-select` 的值,但是这个值在 `selectFilter` 方法中被用作了模糊搜索的参数,如果在 `selectFilter` 中无法获取到这个值,那么确实无法进行模糊搜索。
你可以尝试使用 `$event` 来获取 `el-select` 组件的值,具体做法如下:
1. 修改 `selectFilter` 方法,将参数改为 `$event`。
2. 在 `el-select` 上绑定 `@filter-change="selectFilter"` 事件。
3. 在 `selectFilter` 方法内部获取 `$event` 的值,将其作为模糊搜索的参数即可。
修改后的代码如下:
```
<el-select clearable filterable v-model.lazy="scope.row.goods_id" v-el-select-loadmore="loadMore"
:filter-method="selectFilter" :popper-append-to-body="false" @visible-change="selectVisible"
@filter-change="selectFilter">
<el-option v-for="goods in merchandiseNameData_.slice(0, range)" :key="goods.data"
:label="goods.num" :value="goods.data">
</el-option>
</el-select>
...
selectFilter(val) {
let filterArr = this.merchandiseNameData.filter(item => {
return item.label.toLowerCase().includes(val.toLowerCase());
});
this.merchandiseNameData_ = filterArr;
return filterArr;
}
```
这样就可以在 `selectFilter` 方法中获取到 `el-select` 组件的值,并进行模糊搜索了。
<el-select clearable filterable v-model.lazy="scope.row.goods_id" v-el-select-loadmore="loadMore" @filter-change="selectFilter" :popper-append-to-body="false" @visible-change="selectVisible"> <el-option v-for="goods in merchandiseNameData_.slice(0, range)" :key="goods.data" :label="goods.num" :value="goods.data"> </el-option> </el-select>为什么需要点击一次才展示数据
这段代码是使用了 Element UI 的 el-select 组件,并且使用了 lazy 模式的 v-model 双向绑定,同时也使用了 filterable 过滤器和 clearable 可清空选项。在这段代码中,需要点击一次才展示数据的原因可能是因为 loadMore 方法还没有被触发来加载数据。loadMore 方法是一个自定义方法,它会在 select 组件被打开时自动触发。如果这个方法没有被正确地实现,那么就需要手动点击一下才能展示数据了。另外,也有可能是因为数据量过大,加载需要一定的时间,因此需要等待一段时间才能展示数据。
阅读全文