vue实现列表页

vue实现列表页的基本方法

使用Vue实现列表页需要结合数据绑定、循环渲染和状态管理。通过v-for指令可以轻松渲染列表数据，同时配合计算属性或方法实现筛选、排序等功能。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 }
      ],
      searchQuery: ''
    }
  },
  computed: {
    filteredList() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

列表分页实现

对于数据量较大的列表，需要实现分页功能。可以通过计算总页数并分割数据数组来实现基础分页。

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>第 {{ currentPage }} 页</span>
    <button @click="nextPage" :disabled="currentPage === pageCount">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...], // 列表数据
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.items.length / this.pageSize)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.items.slice(start, end)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  }
}
</script>

列表排序功能

为列表添加排序功能可以提升用户体验。通过定义排序方法和排序状态来实现升降序切换。

<template>
  <div>
    <button @click="sortBy('name')">按名称排序</button>
    <button @click="sortBy('price')">按价格排序</button>
    <ul>
      <li v-for="item in sortedItems" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      sortKey: '',
      sortOrder: 1 // 1为升序，-1为降序
    }
  },
  computed: {
    sortedItems() {
      if (!this.sortKey) return this.items
      return [...this.items].sort((a, b) => {
        const valA = a[this.sortKey]
        const valB = b[this.sortKey]
        return this.sortOrder * (valA > valB ? 1 : -1)
      })
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  }
}
</script>

列表项操作处理

列表通常需要支持对单条数据的操作，如编辑、删除等。可以通过方法绑定和事件传递实现。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
        <button @click="editItem(item)">编辑</button>
        <button @click="deleteItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...]
    }
  },
  methods: {
    editItem(item) {
      // 跳转到编辑页或打开编辑模态框
    },
    deleteItem(id) {
      this.items = this.items.filter(item => item.id !== id)
    }
  }
}
</script>

列表加载状态处理

异步加载数据时需要处理加载状态和错误情况，提升用户体验。

<template>
  <div>
    <div v-if="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.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      this.error = null
      try {
        const response = await api.getItems()
        this.items = response.data
      } catch (err) {
        this.error = '加载数据失败'
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

虚拟滚动优化性能

对于超长列表，使用虚拟滚动技术可以大幅提升性能。可以借助第三方库如vue-virtual-scroller实现。

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      items: [...] // 大量数据
    }
  }
}
</script>

<style>
.scroller {
  height: 500px;
}
.item {
  height: 50px;
}
</style>