首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue搜索列表组件

Vue封装实现可配置的搜索列表组件

2023-08-27 10:49:04 作者：Kyle_Zhang

在Vue.js开发中,经常会遇到需要展示搜索和列表的需求,为了提高代码复用性和开发效率,我们可以封装一个可配置的搜索列表组件,下面我们就来讲讲如何实现这样一个组件吧

在Vue.js开发中，经常会遇到需要展示搜索和列表的需求。为了提高代码复用性和开发效率，我们可以封装一个可配置的搜索列表组件，使其能够根据配置展示搜索表单和列表数据，并支持搜索和分页功能。本篇博客将引导您实现这样一个组件。

组件结构

我们将创建一个名为SearchList的组件，它将包含两个子组件：SearchForm和DataList。SearchForm用于展示搜索表单和处理搜索事件，DataList用于展示列表数据和处理分页事件。

搜索表单

首先，我们创建一个名为SearchForm的子组件，用于展示搜索表单和处理搜索事件。可以根据业务需求自定义搜索表单的字段和样式，并在用户点击搜索按钮时触发自定义事件。

<template>
  <form>
    <!-- 搜索表单字段配置，可以根据业务需求自定义 -->
    <input v-model="searchText" type="text" placeholder="请输入搜索关键字" />
    <button @click="handleSearch">搜索</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    handleSearch() {
      // 将搜索关键字通过自定义事件传递给父组件
      this.$emit('search', this.searchText)
    }
  }
}
</script>

列表数据

然后，我们创建一个名为DataList的子组件，用于展示列表数据和处理分页事件。可以根据业务需求自定义列表的列和样式，并在用户点击分页按钮时触发自定义事件。

<template>
  <ul>
    <!-- 列表数据渲染，可以根据业务需求自定义 -->
    <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>

搜索列表组件

最后，我们创建名为SearchList的父组件，封装SearchForm和DataList，并通过props接收配置参数进行展示。我们将在父组件的methods中处理搜索和分页事件，并用axios发送请求获取数据。

<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) {
      // 发送请求获取数据
      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作为子组件导入，并直接引用它们。通过监听SearchForm的search事件和DataList的prev-page和next-page事件，并在methods中发送请求获取数据，我们可以实现搜索和分页功能。

使用SearchList组件

在父组件中使用SearchList组件，通过props传递配置参数，以展示搜索表单和列表数据。

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作为子组件导入，并通过props传递columns和pageSize参数。可以根据业务需求自定义columns和pageSize参数，并根据实际情况处理搜索和分页事件。

通过封装可配置的搜索列表组件，我们可以在Vue.js开发中实现搜索和列表展示的复用，提高开发效率并增加代码可维护性。使用SearchForm和DataList组件，我们可以根据业务需求自定义搜索表单和数据列表的展示样式，并在父组件中处理搜索和分页事件。

到此这篇关于Vue封装实现可配置的搜索列表组件的文章就介绍到这了,更多相关Vue搜索列表组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！