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完成啦 看效果

相关文章
|
前端开发 开发者 容器
|
前端开发 JavaScript UED
React 拖拽排序组件 Draggable List
在现代Web应用中,拖拽排序功能显著提升用户体验。使用React结合`react-dnd`库,可以轻松创建高效且易于维护的拖拽排序组件。通过简单的拖拽操作,用户能直观调整列表项顺序,适用于任务管理、看板工具等场景。实现步骤包括项目初始化、安装依赖、创建基础组件、添加拖拽功能及管理状态和事件。常见问题如拖拽效果不流畅、顺序未更新等可通过性能优化、正确处理索引交换等方式解决。移动端支持也需考虑,确保跨平台的良好体验。
1068 25
|
大数据 UED
「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List和Grid组件展示数据列表
List 和 Grid 是鸿蒙开发中的核心组件,用于展示动态数据。List 适合展示垂直或水平排列的数据列表,而 Grid 则适用于展示商品或图片的网格布局。本篇将展示如何封装组件,并通过按钮实现布局切换,提升界面的灵活性和用户体验。
856 9
「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List和Grid组件展示数据列表
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
284 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础:掌握列表渲染与动态数据管理
在HarmonyOS应用开发中,ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础,包括数据展示、性能优化和用户交互,以及如何在实际开发中应用这些知识,提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理,结合虚拟化列表和条件渲染等技术,帮助开发者构建高效、响应式的用户界面。
1161 2
nvue中list组件下拉刷新后无法上拉加载更多
nvue中list组件下拉刷新后无法上拉加载更多
413 0
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
|
JavaScript
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
692 0
|
前端开发
前端项目实战捌拾伍react-admin+material ui-踩坑-List的用法之aside组件筛选
前端项目实战捌拾伍react-admin+material ui-踩坑-List的用法之aside组件筛选
241 0
|
安全 Java
java线程之List集合并发安全问题及解决方案
java线程之List集合并发安全问题及解决方案
1845 1

热门文章

最新文章