ant design 中的table组件内使用更新单行时,行头的checkbox状态的修改

vue2项目中使用table,使用了checkbox选择某行。操作列内有刷新按钮,可以刷新本行,其他内容都可以刷新(修改改行的item的属性),但是checkbox的状态不修改。

 <a-table
          bordered
          :rowKey="
              (record) => {
                  return record.id
              }
          "
          :columns="aigcColumns"
          :row-selection="rowSelection"
          > 
...
</a-table>

...
 computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
           if(selectedRowKeys.length>this.maxBatchDownloadCount){
              this.$message.warning(`最多只可下载${this.maxBatchDownloadCount}个`)
            }else{
              this.selectedRowKeys = selectedRowKeys;
            }
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.status != '1', // 状态1才可以使用
            name: record.name,
          },
        }),
      };
    },
...
refresh(item){
// 刷新操作,更新了item的status,但是checbox的状态并未改变

}

经过查找发现,可以在table中加入key,刷新操作后key++, 这样table就会重新执行computed了。

 <a-table
          :key="tableKey"
...
</a-table>

// 刷新操作中
this.tableKey++

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值