当前位置：首页 > news >正文

antd a-list 添加分页

news 2025/7/9 1:46:46

会分为三部分

template

      <a-list item-layout="horizontal" :data-source="localData" :pagination="{...paginationProps,current:currentPage}"><a-list-item slot="renderItem" slot-scope="item"><a-list-item-meta><input slot="title" type="checkbox" style="width:15px;height:15px" value="item" @click="select(item)"><a slot="title" href="javascript:void(0);" @click="getsrc(item)">{{ item.name.length > 20 ? item.name.substr(0, 20) + '...' : item.name }}</a></a-list-item-meta><a slot="actions" @click="getsrc(item)">查看</a><a slot="actions" :href="originUrl + item.name" :download="item.name">下载</a><a slot="actions" @click="del(item)">删除</a></a-list-item></a-list>

分页最主要的代码： pagination

      <a-list item-layout="horizontal" :data-source="localData" :pagination="{...paginationProps,current:currentPage}"></a-list>

data

      // 分页展示的数据localData: [],// 整体的数据localDataSource: [],// 加载第一页的页数 页码数currentPage: 1,// 每页条数pageSize: 14,

js

computed 在页面首次渲染时

    // 床位管理的分页paginationProps () {const _this = thisreturn {pageSize: 14,total: this.localDataSource.length,hideOnSinglePage: true,onChange (page, pageSize) {_this.currentPage = pagegetfilelist({page: _this.currentPage,size: _this.pageSize,department: _this.department}).then(res => {const listoption = []const titleIdAll = []res.list.map((item, index) => {const itemoptin = {}itemoptin.id = item.iditemoptin.name = item.content.substr(item.content.lastIndexOf('/') + 1, item.content.length - item.content.lastIndexOf('/'))listoption.push(itemoptin)titleIdAll.push(item.id)_this.titleIdAllToday = titleIdAll})_this.localData = listoption// 初始化input所有的框var input = document.getElementsByTagName('input')for (var i = 0; i < input.length; i++) {input[i].checked = false}}).catch(() => {this.$message.error('获取列表失败')_this.display = false})}}}

也在computed里

...mapGetters(['department']),

穿插一个小知识字符串截取与本文分页无关

       itemoptin.name = item.content.substr(item.content.lastIndexOf('/') + 1, item.content.length - item.content.lastIndexOf('/'))

js methods

    // 获取列表getfilelist () {getfilelist({department: this.department}).then(res => {this.localDataSource = res.listif (this.localDataSource.length > 0) this.display = true}).catch(() => {this.$message.error('获取列表失败')this.display = false})getfilelist({page: this.currentPage,size: this.pageSize,department: this.department}).then(res => {const listoption = []const titleIdAll = []res.list.map((item, index) => {const itemoptin = {}itemoptin.id = item.iditemoptin.name = item.content.substr(item.content.lastIndexOf('/') + 1, item.content.length - item.content.lastIndexOf('/'))listoption.push(itemoptin)titleIdAll.push(item.id)this.titleIdAllToday = titleIdAll})this.localData = listoptionif (this.localData.length > 0) this.display = true// }}).catch(() => {this.$message.error('获取列表失败')this.display = false})},

查看全文

http://www.lryc.cn/news/171768.html