快捷導(dǎo)航

Vue封裝實現(xiàn)可配置的搜索列表組件

更新時間：2023年08月27日 10:51:26 作者：Kyle_Zhang

在Vue.js開發(fā)中,經(jīng)常會遇到需要展示搜索和列表的需求,為了提高代碼復(fù)用性和開發(fā)效率,我們可以封裝一個可配置的搜索列表組件,下面我們就來講講如何實現(xiàn)這樣一個組件吧

在Vue.js開發(fā)中，經(jīng)常會遇到需要展示搜索和列表的需求。為了提高代碼復(fù)用性和開發(fā)效率，我們可以封裝一個可配置的搜索列表組件，使其能夠根據(jù)配置展示搜索表單和列表數(shù)據(jù)，并支持搜索和分頁功能。本篇博客將引導(dǎo)您實現(xiàn)這樣一個組件。

組件結(jié)構(gòu)

我們將創(chuàng)建一個名為SearchList的組件，它將包含兩個子組件：SearchForm和DataList。SearchForm用于展示搜索表單和處理搜索事件，DataList用于展示列表數(shù)據(jù)和處理分頁事件。

搜索表單

首先，我們創(chuàng)建一個名為SearchForm的子組件，用于展示搜索表單和處理搜索事件?？梢愿鶕?jù)業(yè)務(wù)需求自定義搜索表單的字段和樣式，并在用戶點擊搜索按鈕時觸發(fā)自定義事件。

<template>
  <form>
    <!-- 搜索表單字段配置，可以根據(jù)業(yè)務(wù)需求自定義 -->
    <input v-model="searchText" type="text" placeholder="請輸入搜索關(guān)鍵字" />
    <button @click="handleSearch">搜索</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    handleSearch() {
      // 將搜索關(guān)鍵字通過自定義事件傳遞給父組件
      this.$emit('search', this.searchText)
    }
  }
}
</script>

列表數(shù)據(jù)

然后，我們創(chuàng)建一個名為DataList的子組件，用于展示列表數(shù)據(jù)和處理分頁事件。可以根據(jù)業(yè)務(wù)需求自定義列表的列和樣式，并在用戶點擊分頁按鈕時觸發(fā)自定義事件。

<template>
  <ul>
    <!-- 列表數(shù)據(jù)渲染，可以根據(jù)業(yè)務(wù)需求自定義 -->
    <li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="handlePrevPage">上一頁</button>
  <span>{{ currentPage }}</span>
  <button @click="handleNextPage">下一頁</button>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  methods: {
    handlePrevPage() {
      // 將用戶點擊的上一頁事件通過自定義事件傳遞給父組件
      this.$emit('prev-page')
    },
    handleNextPage() {
      // 將用戶點擊的下一頁事件通過自定義事件傳遞給父組件
      this.$emit('next-page')
    }
  }
}
</script>

搜索列表組件

最后，我們創(chuàng)建名為SearchList的父組件，封裝SearchForm和DataList，并通過props接收配置參數(shù)進行展示。我們將在父組件的methods中處理搜索和分頁事件，并用axios發(fā)送請求獲取數(shù)據(jù)。

<template>
  <div>
    <search-form @search="handleSearch"></search-form>
    <data-list :data-list="listData" :current-page="currentPage" @prev-page="handlePrevPage" @next-page="handleNextPage"></data-list>
  </div>
</template>
<script>
import SearchForm from './SearchForm'
import DataList from './DataList'
export default {
  components: {
    SearchForm,
    DataList
  },
  data() {
    return {
      listData: [],
      currentPage: 1
    }
  },
  methods: {
    handleSearch(keyword) {
      // 發(fā)送請求獲取數(shù)據(jù)
      axios
        .get(`/api/data?keyword=${keyword}&page=${this.currentPage}`)
        .then(response => {
          this.listData = response.data
        })
        .catch(error => {
          console.error(error)
        })
    },
    handlePrevPage() {
      // 處理上一頁事件
      this.currentPage--
      this.handleSearch()
    },
    handleNextPage() {
      // 處理下一頁事件
      this.currentPage++
      this.handleSearch()
    }
  }
}
</script>

在SearchList組件中，我們將SearchForm和DataList作為子組件導(dǎo)入，并直接引用它們。通過監(jiān)聽SearchForm的search事件和DataList的prev-page和next-page事件，并在methods中發(fā)送請求獲取數(shù)據(jù)，我們可以實現(xiàn)搜索和分頁功能。

使用SearchList組件

在父組件中使用SearchList組件，通過props傳遞配置參數(shù)，以展示搜索表單和列表數(shù)據(jù)。

plaintext

<template>
  <div>
    <search-list :columns="columns" :page-size="pageSize"></search-list>
  </div>
</template>

import SearchList from './SearchList
export default {
  components: {
    SearchList
  },
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '性別', prop: 'gender' }
      ],
      pageSize: 10
    }
  }
}

在父組件中，我們將SearchList作為子組件導(dǎo)入，并通過props傳遞columns和pageSize參數(shù)?？梢愿鶕?jù)業(yè)務(wù)需求自定義columns和pageSize參數(shù)，并根據(jù)實際情況處理搜索和分頁事件。

通過封裝可配置的搜索列表組件，我們可以在Vue.js開發(fā)中實現(xiàn)搜索和列表展示的復(fù)用，提高開發(fā)效率并增加代碼可維護性。使用SearchForm和DataList組件，我們可以根據(jù)業(yè)務(wù)需求自定義搜索表單和數(shù)據(jù)列表的展示樣式，并在父組件中處理搜索和分頁事件。

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

您可能感興趣的文章: