el-select 大数据loadmore

el-select 是一个非常实用的组件，它可以让用户在一个下拉菜单里选择一个选项。但是，如果有大量的选项，可能会导致性能问题，因为 el-select 的默认行为是在初次渲染时将所有选项都显示出来。

为了解决这个问题，el-select 提供了一个 loadmore 功能。通过这个功能，我们可以将所有的选项分批加载，只显示第一批选项和一个“加载更多”的按钮。当用户点击按钮时，下一批选项会被加载并显示在下拉菜单中，以此类推，直到所有选项都被加载完成。

使用 el-select 的 loadmore 功能前，我们需要先确定每批加载多少个选项，以及如何组织这些选项的数据。我们可以使用 el-select 的 before-dropdown-show 事件，在弹出下拉菜单前动态地生成选项列表。当用户点击“加载更多”按钮时，我们可以调用一个方法来加载下一批选项的数据，然后更新 el-select 的选项列表。

需要注意的是，el-select 的 loadmore 功能对于大数据集合的效率很高，但对于小数据集合来说，可能会显得有些臃肿。因此，在使用 el-select 的 loadmore 功能前，我们需要先评估数据集合的大小，对于小数据集合，可以选择默认渲染所有选项的方式来实现。

相关问题

el-select-loadmore

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` 组件的值，并进行模糊搜索了。