快捷導(dǎo)航

Vue+ElementUI?封裝簡易PaginationSelect組件的詳細(xì)步驟

更新時間：2022年08月06日 10:49:19 作者：千秋歲歲歲

這篇文章主要介紹了Vue+ElementUI?封裝簡易PaginationSelect組件,這里簡單介紹封裝的一個Pagination-Select組件幾個步驟，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

在實(shí)際開發(fā)工作中，經(jīng)常會碰到當(dāng)select下拉數(shù)據(jù)過需要做分頁的情況
這里簡單介紹封裝的一個Pagination-Select組件幾個步驟
封裝的比較簡易，可以根據(jù)自己的項(xiàng)目進(jìn)行改動

/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項(xiàng)目，這邊直接放在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組件配置項(xiàng)
      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>

根據(jù)selectOptions配置項(xiàng)修改組件屬性，父組件請求數(shù)據(jù)傳入子組件進(jìn)行渲染，當(dāng)子組件出發(fā)change方法時
使用emit將所選的值回傳父組件，進(jìn)行后續(xù)代碼邏輯

到此這篇關(guān)于Vue+ElementUI 封裝簡易PaginationSelect組件的文章就介紹到這了,更多相關(guān)Vue ElementUI封裝PaginationSelect組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: