一个好用的分页插件 Ant Design Vue 中的List组件

最新推荐文章于 2024-08-23 15:27:17 发布

Tong XU

最新推荐文章于 2024-08-23 15:27:17 发布

阅读量5.6k

点赞数 1

分类专栏： JavaScript vue

本文链接：https://blog.csdn.net/qq_41700374/article/details/103735599

版权

本文介绍如何在Ant Design Vue中利用List组件实现高效且用户体验良好的分页功能，通过实例展示其配置和使用方法。

摘要由CSDN通过智能技术生成

<template>
  <div class="listv2-root">
    <a-list
      :itemLayout="itemLayout"
      :size="encoding.size?encoding.size:size"
      :pagination="encoding.pagination !== false ?encoding.pagination?encoding.pagination:pagination : false"
      :dataSource="data"
    >
      <a-list-item slot="renderItem" slot-scope="item, index" :key="index">{
  { item.content }}</a-list-item>
    </a-list>
  </div>
</template>

<script>
import Vue from "vue";
import { List } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";

Vue.use(List);

export default {
  name: "Listv2",
  props: {
    data: {
      type: Array,
      required: true
    },
    encoding: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {