Vue+ElementUI 封裝簡易PaginationSelect元件的詳細步驟

2022-08-06 14:00:02

在實際開發工作中，經常會碰到當select下拉資料過需要做分頁的情況
這裡簡單介紹封裝的一個Pagination-Select元件幾個步驟
封裝的比較簡易，可以根據自己的專案進行改動

/components/Pagination-Select/index.vue

<template>
  <div id="PaginationSelect">
     <el-select
      v-model="value"
      :placeholder="selectOptions.placeholder"
      :filterable="selectOptions.filterable"
      :size="selectOptions.size"
      :collapse-tags="selectOptions.collapseTags"
      :multiple="selectOptions.multiple"
      :clearable="selectOptions.clearable"
      @change="selectChange">
      <el-option
        v-for="item in (selectOptions.selectData).slice((selectPage.currentPage - 1) * selectPage.pageSize, selectPage.currentPage * selectPage.pageSize)"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="selectPage.currentPage"
        layout="prev, pager, next"
        :page-size="selectPage.pageSize"
        :total="selectOptions.selectData.length">
      </el-pagination>
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'PaginationSelect',
  props: {
    selectOptions: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      selectPage: {
        currentPage: 1,
        pageSize: 3
      },
      value: ''
    }
  },
  methods: {
    selectChange (val) {
      this.$emit('getSelectVal', val)
    },
    handleSizeChange (val) {
      this.selectPage.pageSize = val
    },
    handleCurrentChange (val) {
      this.selectPage.currentPage = val
    }
  }
}
</script>

<style lang="less">
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>

demo專案，這邊直接放在App.vue中使用

<template>
  <div id="app">
    <Pagination-Select :selectOptions="selectOptions" @getSelectVal="getSelectVal" />
  </div>
</template>

<script>
import PaginationSelect from './components/Pagination-Select'
export default {
  name: 'App',
  components: { PaginationSelect },
  data () {
    return {
      // select元件設定項
      selectOptions: {
        filterable: true,
        clearable: true,
        placeholder: '請選擇aaa',
        size: 'small',
        multiple: false,
        collapseTags: false,
        selectData: []
      }
    }
  },
  created () {
    this.querySelectData()
  },
  methods: {
    querySelectData () {
      setTimeout(() => {
        this.selectOptions.selectData = [
          {
            value: '1',
            label: '黃金糕'
          },
          {
            value: '2',
            label: '雙皮奶'
          },
          {
            value: '3',
            label: '蚵仔煎'
          },
          {
            value: '4',
            label: '龍鬚麵'
          },
          {
            value: '5',
            label: '北京烤鴨'
          }
        ]
      }, 2000)
    },
    getSelectVal (val) {
      console.log(val, 'val')
    }
  }
}
</script>
<style lang="less">
#app {
  display: flex;
  justify-content: center;
}
</style>

根據selectOptions設定項修改元件屬性，父元件請求資料傳入子元件進行渲染，當子元件出發change方法時
使用emit將所選的值回傳父元件，進行後續程式碼邏輯

到此這篇關於Vue+ElementUI 封裝簡易PaginationSelect元件的文章就介紹到這了,更多相關Vue ElementUI封裝PaginationSelect元件內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue+ElementUI 封裝簡易PaginationSelect元件的詳細步驟

熱門文章