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传递配置参数，以展示搜索表单和列表数据。

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

<script>
import SearchList from './SearchList

export default {
  components: {
    SearchList
  },
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'gender' }
      ],
      pageSize: 10
    }
  }
}
</script>

在父组件中，我们将SearchList作为子组件导入，并通过props传递columns和pageSize参数。可以根据业务需求自定义columns和pageSize参数，并根据实际情况处理搜索和分页事件。

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