vue公共列表的实现

实现公共列表的步骤

在Vue中实现公共列表功能，可以通过封装可复用的列表组件来完成。以下是具体实现方法：

创建公共列表组件 创建一个名为CommonList.vue的组件，包含基本的列表展示功能：

<template>
  <div class="common-list">
    <ul>
      <li v-for="(item, index) in listData" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      required: true
    }
  }
}
</script>

使用公共列表组件 在父组件中引入并使用公共列表组件：

<template>
  <div>
    <common-list :listData="items"></common-list>
  </div>
</template>

<script>
import CommonList from './CommonList.vue'

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

增强列表组件功能 为公共列表组件添加更多功能，如自定义渲染、分页等：

<template>
  <div class="common-list">
    <ul>
      <li v-for="(item, index) in listData" :key="index">
        <slot name="item" :item="item" :index="index">
          {{ item }}
        </slot>
      </li>
    </ul>
    <div v-if="pagination" class="pagination">
      <button @click="prevPage">上一页</button>
      <span>当前页: {{ currentPage }}</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      required: true
    },
    pagination: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  computed: {
    paginatedData() {
      if (!this.pagination) return this.listData
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.listData.slice(start, end)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage * this.pageSize < this.listData.length) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  }
}
</script>

使用增强版列表组件 在父组件中使用增强功能的公共列表组件：

<template>
  <div>
    <common-list 
      :listData="items" 
      :pagination="true"
      :pageSize="5"
    >
      <template v-slot:item="{ item, index }">
        <div class="custom-item">
          {{ index + 1 }}. {{ item.name }} - {{ item.price }}
        </div>
      </template>
    </common-list>
  </div>
</template>

<script>
import CommonList from './CommonList.vue'

export default {
  components: {
    CommonList
  },
  data() {
    return {
      items: [
        { name: 'Product A', price: '$10' },
        { name: 'Product B', price: '$20' },
        // 更多数据...
      ]
    }
  }
}
</script>

添加样式 为公共列表组件添加基本样式：

.common-list ul {
  list-style: none;
  padding: 0;
}

.common-list li {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

通过以上方法，可以创建一个灵活、可复用的公共列表组件，满足不同场景下的列表展示需求。