antd a-list 添加分页

会分为三部分

template

html 复制代码
      <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

html 复制代码
      <a-list item-layout="horizontal" :data-source="localData" :pagination="{...paginationProps,current:currentPage}">

          </a-list>

data

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

js

computed 在页面首次渲染时

javascript 复制代码
    // 床位管理的分页
    paginationProps () {
      const _this = this
      return {
        pageSize: 14,
        total: this.localDataSource.length,
        hideOnSinglePage: true,
        onChange (page, pageSize) {
          _this.currentPage = page
          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.id
              itemoptin.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里

javascript 复制代码
...mapGetters(['department']),

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

javascript 复制代码
       itemoptin.name = item.content.substr(item.content.lastIndexOf('/') + 1, item.content.length - item.content.lastIndexOf('/'))

js methods

javascript 复制代码
    // 获取列表
    getfilelist () {
      getfilelist({
        department: this.department
      }).then(res => {
        this.localDataSource = res.list
        if (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.id
          itemoptin.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
        if (this.localData.length > 0) this.display = true
        // }
      }).catch(() => {
        this.$message.error('获取列表失败')
        this.display = false
      })
    },
相关推荐
嵌入式郑工6 小时前
LINUX驱动开发: 设备和驱动是怎么匹配的?
linux·运维·服务器
rain bye bye7 小时前
calibre LVS 跑不起来 就将setup 的LVS Option connect下的 connect all nets by name 打开。
服务器·数据库·lvs
郭式云源生法则7 小时前
归档及压缩、重定向与管道操作和综合使用,find精确查找、find处理查找结果、vim高级使用、vimdiff多文件使用
linux·运维·服务器
小池先生8 小时前
服务请求出现偶发超时问题,经查服务本身没问题,问题出现在nginx转发。
运维·服务器·nginx
asdfg12589638 小时前
如何判断一个地址是否可以用作主机 IP 地址?
服务器·网络·tcp/ip
ytttr87310 小时前
C语言实现Modbus TCP/IP协议客户端-服务器
服务器·c语言·tcp/ip
磨十三11 小时前
C++ 容器详解:std::list 与 std::forward_list 深入解析
开发语言·c++·list
今麦郎xdu_11 小时前
【Linux系统】命令行参数和环境变量
linux·服务器·c语言·c++
还不秃顶的计科生11 小时前
linux下conda未安装的解决方法(离线安装linux下的conda)
linux·运维·服务器
迎風吹頭髮12 小时前
Linux服务器编程实践26-TCP连接超时重连机制:超时时间计算与重连策略
服务器·网络·php