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

<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>

<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>

<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>

<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
    }
  }
}