element-ui 下拉框的分页选择

一，场景需求

业务：一般情况下，一个下拉选项，就1~10个值，但是存在下拉框的选项过多，比如100+条，这个时候，为了方便用户，满足视觉效果，需要为下拉框，进行分页。

实现效果，如图所示：

二，代码实现

1，组件形式：newSelect.vue

 <template>
  <el-row>
    <el-col :span="24">
      <el-select v-model="copyValue" filterable clearable placeholder="请选择" @change="updateValue"
        :style="'width:100%;min-width:250px'">
        <el-option v-for="item in dataList" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]">
        </el-option>
        <el-col :span="24">
          <div style="float: right;margin-right:10px;padding-bottom: 10px">
            <el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum"
              :page-size="pageInfo.pageSize" layout="total, prev, pager, next" :total="pageInfo.total">
            </el-pagination>
          </div>
        </el-col>
      </el-select>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "NewSelect",
  props: {
    // 绑定值
    value: String,
    // 下拉列表
    dataList: Array,
    // option的label在列表中对应的key
    labelKey: String,
    // option的value在列表中对应的key
    valueKey: String,
    // 分页信息
    pageInfo: Object
  },
  watch: {
    value: {
      handler: function (val) {
        this.copyValue = val;
      },
      deep: true
    }
  },
  methods: {
    // 更新值
    updateValue() {
      this.$emit('update:value', this.copyValue);
    },
    // 翻页
    handleCurrentChange(val) {
      this.$emit('selectPageChange', val);
    }
  },
  data() {
    return {
      copyValue: this.value
    };
  }
};
</script>

<style scoped>
</style>

2，父组件

• 直接引用newSelect.vue：

        <NewSelect :value.sync="copyValue" @selectPageChange="parentEntityPageChange" :valueKey="'tid'"
          :labelKey="'title'" :pageInfo="entityPageInfo" :dataList="entityDataTable">
        </NewSelect>

• 定义变量：

  export default{
     data(){
       return{
         // 父实例下拉框的数据
         entityPageInfo: {
           pageNum: 1,
           pageSize: 6,  //自定义每页多少条
           total: 0
         },
         // 复制值
         copyValue: '',
         // 父实例下拉框的数据
         entityDataTable: []
         }
        },
        methods:{
          // 父实例翻页
          parentEntityPageChange(val) {
            this.entityPageInfo.pageNum = val;
            this.getPubTemplateTitleListFn()
          },
           //获取下拉框的数据
          async getData(){
            const params = {
               appId: this.appIdKey,
               ids: this.ategory,
               pageNum: this.entityPageInfo.pageNum,
               pageSize: this.entityPageInfo.pageSize
             }
             const { data: { records }, data } = await APPSET.getPubTemplateTitleList(params)
             this.entityDataTable = records  
             this.entityPageInfo.total = data.total
          }
        }
       
  }

三，总结

记录一些场景需求，方便记忆、学习。