vxe-table 跨页勾选,可回显

<vxe-table
      ref="table"
      v-loading="listLoading"
      :data="tableData"
      border
      stripe
      :height="tableHeight"
       show-footer
      :footer-method="footerMethod"
      :seq-config="{seqMethod}"
      :checkbox-config="{reserve:true}"
      row-id="lngotherexecuteid"
      @resizable-change="resizableChange"
      @checkbox-all="selectChangeEvent"
      @checkbox-change="selectChangeEvent"
    >
selectChangeEvent({ records, reserves }) {
        this.currentRow = [...reserves, ...records]
      }
### vxe-grid 表格多解决方案 为了实现 `vxe-grid` 表格的多功能,可以利用组件提供的配置项来保存和恢复用户的项。具体来说,在初始化表格时设置默认的数据,并通过监听事件更新这些数据。 #### 设置初始状态 在定义表格属性时,可以通过 `checkboxConfig.checkRowKeys` 来指定哪些行应该被预先。这通常是一个由唯一键组成的数组,用于标识每一行记录: ```javascript const selectionRows = ['row1', 'row2']; // 假设这是要预中的行ID列表 // ... <vxe-grid :checkbox-config="{ checkRowKeys: selectionRows, reserve: true }" > </vxe-grid> ``` 此代码片段展示了如何使用 `checkRowKeys` 属性[^2]。 #### 数据持久化与面间传递 当涉及到分或其他情况下重新加载数据时,如果希望保持之前的状态,则需开启 `reserve` 参数并确保服务器端能够返一致性的主键字段以便于客户端匹配已有的择。 另外一种方法是在每次请求新一或刷新整个视图之前先收集当前所有已被标记的择项(即 `selectionRows`),并将它们存储起来;待下一次渲染完成后再将其应用去。 #### 更新后的调处理 每当发生改变——无论是用户手动操作还是程序逻辑触发——都应该调用相应的接口通知父级组件或者其他依赖方关于最新变化的信息。例如,可以在 `@checkbox-change` 事件处理器内执行必要的业务流程: ```javascript methods: { checkboxChange({ records }) { console.log('Updated selected rows:', records); // 这里可以根据实际需求做更多事情, // 如发送AJAX请求同步至后台数据库等... } } ``` 上述函数会在任何复框的状态发生变化时被执行,并接收最新的定条目作为参数传入。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值