Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果

简介: Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
最近在做新的需求,使用到了list列表展示数据,但是场景中需要使用到复选的问题,看了官方文档,没有对应实现,以下是看了很多文档整理之后的结果,可以直接使用。
话不多说 上代码
<a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData"
      :itemLayout="'vertical'" :selected="selectedItems" @clear-selected="clearSelected">
      <a-list-item slot="renderItem" key="item.billId" slot-scope="item, index">
        <template slot="actions">
        
        </template>
        <div style="font-size: 18px;color: rgb(0, 0, 0);">
          <input type="checkbox" :checked="isSelected(item)" @change="toggleSelected(item)">
          业务类型: {{ item.businessType }}
        </div>
      </a-list-item>
    </a-list>
return {
    selectedItems: [], //选中信息
        listData: [],
        pagination: {
          showSizeChanger: true,
          // showQuickJumper: true,
          total: 0,
          // 设置页面变化时的回调,调用methods中的onChange方法
          onChange: this.onChange,
          // 设置每页显示条数变化时的回调
          onShowSizeChange: this.onShowSizeChange,
        }
        }
computed: {
      //计算当前是否已经全部勾选
      isAllSelected() {
        return this.selectedItems.length == this.listData.length
      }
    },
methods: {
// 页面变化时的回调
      onShowSizeChange(current, size) {
        this.pagination.pageSize = size
        this.Paging_request_data(current, size)
      },
      onChange(page, pageSize) {
        console.log(page, pageSize)
        this.Paging_request_data(page, pageSize)
      },
      // 分页请求数据
      Paging_request_data(currentPage, pageSize) {
        // 设置请求参数
        this.queryParam.pageNum = currentPage
        this.queryParam.pageSize = pageSize
        // 调用接口
        this.getList()
      },
       isSelected(index) {
        return this.selectedItems.includes(index)
      },
      toggleSelected(index) {
        const idx = this.selectedItems.indexOf(index)
        if (idx == -1) {
          this.selectedItems.push(index)
        } else {
          this.selectedItems.splice(idx, 1)
        }
      },
      selectAll() {
        if (this.isAllSelected) {
          this.selectedItems = []
        } else {
          this.selectedItems = this.listData
        }
      },
      clearSelected() {
        this.selectedItems = []
      },
}

OK完成啦 看效果

相关文章
|
前端开发 开发者 容器
|
22天前
|
大数据 UED
「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表
List 和 Grid 是鸿蒙开发中的核心组件,用于展示动态数据。List 适合展示垂直或水平排列的数据列表,而 Grid 则适用于展示商品或图片的网格布局。本篇将展示如何封装组件,并通过按钮实现布局切换,提升界面的灵活性和用户体验。
58 9
「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表
|
1月前
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础:掌握列表渲染与动态数据管理
在HarmonyOS应用开发中,ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础,包括数据展示、性能优化和用户交互,以及如何在实际开发中应用这些知识,提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理,结合虚拟化列表和条件渲染等技术,帮助开发者构建高效、响应式的用户界面。
188 2
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
41 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
nvue中list组件下拉刷新后无法上拉加载更多
nvue中list组件下拉刷新后无法上拉加载更多
138 0
|
7月前
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
|
7月前
|
JavaScript
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
336 0
|
前端开发
前端项目实战捌拾伍react-admin+material ui-踩坑-List的用法之aside组件筛选
前端项目实战捌拾伍react-admin+material ui-踩坑-List的用法之aside组件筛选
79 0
|
前端开发
前端项目实战捌拾叁react-admin+material ui-踩坑-List的用法之aside组件
前端项目实战捌拾叁react-admin+material ui-踩坑-List的用法之aside组件
90 0
|
6月前
|
安全 Java
java线程之List集合并发安全问题及解决方案
java线程之List集合并发安全问题及解决方案
991 1