ant design vue表格里的单选框禁用与选中/radio

表格里的属性 一定要去看表格的api 我 一开始还傻不拉几看单选radio的属性!!真的浪费我很多时间

<a-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :scroll="{ x: 800 }"
      :data="loadData"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, type: 'radio',
        onChange:handleChanged}"            
      >
</a-table>

单选type类型radio要加上,onChange触发的方法,是当前选中得一条数据 selectedRowKeys是选中的值(是个数值数组)selectedId是当前选中数据的id  record是当前选中得一条数据

 handleChanged(selectedId, record) {
      this.selectedRowKeys = selectedId
      this.showRow = record
    },

表格根据当前id去禁用   使用getCheckboxProps禁用属性

 <a-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :scroll="{ x: 800 }"
      :data="loadData"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, type: 'radio', 
        onChange: handleChanged, getCheckboxProps: getCheckboxProps}"
      >
<a-table>

record是表格里的每一条数据 disabled:是要禁用的数据(传id就好了)官网有个name属性,了解了一下,貌似没太大作用 所以只需要disabled一个属性就够了

getCheckboxProps(record) {
      return {
          props:{
            disabled: record.id,
          }
        }
    },

如果根据判断去选中需要禁选的数据 要在return之前去做判断 例如我的代码 是父组件传来的数组合集 循环完去和列表的数据对比 相同的话就禁用掉 并且id不等于当前选中的那一条   this.disabledCoupon是父组件选中的数据  

getCheckboxProps(record) {
      var isChecked = false;
      for (let key in this.disabledCoupon){
        var a = this.disabledCoupon[key]
        if(record.id==a){
          isChecked = true;
          break;
        }
      }
      return {
          props:{
            disabled: record.id!=this.selectedRowKeys&&isChecked,
          }
        }
    },

哦 对!还有一个重点 就是表格属性:customRow  是设置点击整行的数据触发的事件 当时我设了 这个值 单选框那个框框是不可选 但是我点击当前那一行 还是可以勾选上的 所以这个属性要去掉

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值