# 下拉选择分页组件

在组件中需配置：

@page-change：选择分页的事件；传回当前选中的页码
@change：下拉选择事件；传回当前选中的值

optionSource 下拉框组件数据源
valueKey 传入的 option 数组中，要作为最终选择项的键值名称
labelKey 传入的 option 数组中，要作为显示项的键值名称
paginationOption object 默认值

pageSize: 6,//每页显示条数
currentPage: 1,//当前页
pagerCount: 5,//按钮数，超过时会折叠
total: 0 //总条数

<template>
  <div class="p-pagination-select-demo" style="width:100%;min-height:100px;padding:15px;">
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="品名(原料)" prop="materialId">
        <p-pagination-select
          @page-change="pageChange"
          :optionSource="materialIdArr"
          v-model="addForm.materialId"
          labelKey="materialName"
          valueKey="id"
          :paginationOption="setSelectPage"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitImportForm">提交</el-button>
  </div>
</template>
<script>
import data from './data.json'
import data2 from './data2.json'
export default {
  name: 'PPaginationSelectDemo',
  data () {
    return {
      addForm: {
        materialId: null, // 产出品名
      },
      addFormRules: {
        materialId: [
          { required: true, message: '请选择品名(原料)！', trigger: 'change' }
        ]
      },
      materialIdArr: [],
      setSelectPage: {
        pageSize: 6, // 每页显示条数
        currentPage: 1, // 当前页
        pagerCount: 7, // 按钮数，超过时会折叠
        total: 0 // 总条数
      }
    }
  },
  created () {
    this.selectMaterialList(1)
  },
  methods: {
    // 下拉选择分页
    pageChange (val) {
      this.setSelectPage.currentPage = val
      this.selectMaterialList(this.setSelectPage.currentPage)
    },
    // 获取品名下拉数据
    async selectMaterialList (pageNum) {
      // const params = {
      //   pageNum: pageNum || 1,
      //   pageSize: this.setSelectPage.pageSize,
      // }
      // const res = await Api.selectMaterialList(params)
      let res
      if (pageNum === 1) {
        res = await data
      } else {
        res = await data2
      }
      if (res.success) {
        // console.log('获取品名下拉数据', res.data)
        this.materialIdArr = res.data.records
        this.setSelectPage.total = res.data.total
      }
    },
    submitImportForm () {
      this.$refs.addForm.validate(async (valid) => {
        if (!valid) return
        console.log('提交', this.addForm)
      })
    },
  }
}
</script>

← Select 下拉组件单选 →