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

相关文章
|
前端开发 开发者 容器
|
17天前
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础:掌握列表渲染与动态数据管理
在HarmonyOS应用开发中,ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础,包括数据展示、性能优化和用户交互,以及如何在实际开发中应用这些知识,提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理,结合虚拟化列表和条件渲染等技术,帮助开发者构建高效、响应式的用户界面。
152 2
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
31 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
11月前
nvue中list组件下拉刷新后无法上拉加载更多
nvue中list组件下拉刷新后无法上拉加载更多
129 0
|
6月前
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
|
6月前
|
JavaScript
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
Ant designe vue中有关<a-list>组件中 实现分页以及复选框效果
301 0
|
前端开发
前端项目实战捌拾伍react-admin+material ui-踩坑-List的用法之aside组件筛选
前端项目实战捌拾伍react-admin+material ui-踩坑-List的用法之aside组件筛选
76 0
|
前端开发
前端项目实战捌拾叁react-admin+material ui-踩坑-List的用法之aside组件
前端项目实战捌拾叁react-admin+material ui-踩坑-List的用法之aside组件
86 0
|
前端开发
前端项目实战捌拾陆react-admin+material ui-踩坑-List的用法之aside组件SavedQueriesList增加筛选
前端项目实战捌拾陆react-admin+material ui-踩坑-List的用法之aside组件SavedQueriesList增加筛选
48 0
|
5月前
|
安全 Java
java线程之List集合并发安全问题及解决方案
java线程之List集合并发安全问题及解决方案
891 1

热门文章

最新文章