最近在做新的需求,使用到了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完成啦 看效果