数据过多，select优化

最新推荐文章于 2024-05-21 11:16:02 发布

HappyCodingTopOne

最新推荐文章于 2024-05-21 11:16:02 发布

阅读量260

点赞数

分类专栏： vue 文章标签：前端 elementui

本文链接：https://blog.csdn.net/weixin_43852916/article/details/126951594

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

封装Select组件


<template>
  <div>
    <el-select
      ref="selectRef"
      v-bind="$attrs"
      v-on="$listeners"
      clearable
      filterable
      remote
    >
      <div class="option">
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </div>
      <div class="pagin">
        <el-pagination
          small
          background
          layout="prev,pager,next,total"
          v-bind="$attrs"
          v-on="$listeners"
        ></el-pagination>
      </div>
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: ()=>[]
    },
  },
    data() {
        return {
          
        }
    },
};
</script>

<style lang="scss" scoped>
.option{
    min-height: 50px;
    height: auto;
    max-height: 150px;
    overflow-y: auto;
}
.pagin{
    background:#fff;
}
::-webkit-scrollbar{
    width: 2px;
}
</style>

使用

 <EverSelect
          :page-size="selectParam.pageSize"
          :total="selectParam.total"
          :current-page="selectParam.currentPage"
          :options="selectList"
          @change="selectChange"
          :value="form.data.productName"
          :remote-method="remoteSearch"
          :hide-on-single-page="true"
        />

   // 远程搜索
    remoteSearch(val) {
      this.getList({
        page: this.selectParam.pageNum,
        rows: this.selectParam.pageSize,
        productBusinessTypeIds: [1, 3, 4],
        productName:val
      });
    },
    //选取item
selectChange(val){
      let info = this.selectList.find(item=> item.id ==val)
      this.$set(this.form.data, "productId", info.id);
      this.$set(this.form.data, "numberType", "1");
      this.$set(
        this.form.data,
        "productBusinessTypeId",
        info.productBusinessTypeId
      );
      this.$set(this.form.data, "productName", info.productName);
      this.$set(this.form.data, "productNum", info.productNum);
    },
    /* 切换页 */
    currentPage(val) {
      this.$set(this.selectParam, "pageNum", val);
      this.getList()
    },
  getList() {
      let param = {
        page: this.selectParam.pageNum,
        rows: this.selectParam.pageSize,
        productBusinessTypeIds: [1, 3, 4],
      };
      requestData("toChooseListQueryPageDigital", param).then((res) => {
        if (res.code == 1000) {
         this.selectList = res.data.records.map(item=>{
           return {
             ...item,
             label:item.productName,
             value:item.id,
           }
          })
          this.$set(this.selectParam, "total",res.data.total);
          this.$set(this.selectParam, "currentPage",res.data.pages);
        }
      });
    },