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