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完成啦 看效果
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在MATLAB App Designer,您可以通过以下步骤为菜单组件设置图标: 1.在App Designer打开您的应用程序,并打开您的UI图形用户界面。 2.选择菜单组件并向其添加菜单项。为每个菜单项指定标签和回调函数。 3.右键单击菜单项并选择“属性编辑器”。 4.在属性编辑器,展开“图标”栏,单击“选择”。 5.选择要用作菜单项图标的图像文件。 6.如果需要,可以对选定的图像进行调整和裁剪以适合菜单项大小。 7.单击“应用”并保存修改。 以下是一个示例代码,展示如何通过MATLAB为App Designer的菜单组件添加图标: % --- Executes on button press in menuButton. function menuButton_Callback(app, ~) % Create menu components menu = uimenu(app.UIFigure); menuItem1 = uimenu(menu,'Text','File','Separator','on'); menuItem2 = uimenu(menu,'Text','Open','MenuSelectedFcn',@(src,event)openFile(app)); menuItem3 = uimenu(menu,'Text','Save','MenuSelectedFcn',@(src,event)saveFile(app)); % Set icons for menu items [icon1,~] = imread('file-icon.png'); [icon2,~] = imread('open-icon.png'); [icon3,~] = imread('save-icon.png'); menuItem1.Icon = icon1; menuItem2.Icon = icon2; menuItem3.Icon = icon3; end 注意:这些图标(file-icon.png、open-icon.png和save-icon.png)需要在应用程序的当前工作目录。您可以使用其他图像文件作为菜单组件的图标,只要确保它们存在并具有所需的大小和格式即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还算善良_

如果对你的工作有所帮助,拜托啦

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值