vue实现列表页面

Vue 实现列表页面的方法

使用 v-for 指令渲染列表

Vue 的 v-for 指令可以轻松实现列表渲染。通过遍历数组或对象，动态生成列表项。示例代码如下：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

添加分页功能

对于大量数据，分页是提升用户体验的关键。可以通过计算属性实现分页逻辑：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...], // 假设有大量数据
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.items.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}
</script>

实现搜索和过滤

通过计算属性可以实现列表的搜索和过滤功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      searchQuery: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 Vuex 管理状态

对于大型应用，可以使用 Vuex 集中管理列表数据：

// store.js
export default new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    setItems(state, items) {
      state.items = items
    }
  },
  actions: {
    fetchItems({ commit }) {
      // 假设从 API 获取数据
      api.getItems().then(response => {
        commit('setItems', response.data)
      })
    }
  }
})

<template>
  <ul>
    <li v-for="item in $store.state.items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  created() {
    this.$store.dispatch('fetchItems')
  }
}
</script>

添加加载状态和错误处理

良好的用户体验需要处理加载状态和可能的错误：

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">{{ error }}</div>
    <ul v-else>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      error: null
    }
  },
  created() {
    this.loadItems()
  },
  methods: {
    async loadItems() {
      this.loading = true
      this.error = null
      try {
        const response = await api.getItems()
        this.items = response.data
      } catch (err) {
        this.error = 'Failed to load items'
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

以上方法涵盖了 Vue 实现列表页面的核心功能，可以根据具体需求组合使用或进一步扩展。