ant design vue表格里的单选框禁用与选中/radio
如果根据判断去选中需要禁选的数据 要在return之前去做判断 例如我的代码 是父组件传来的数组合集 循环完去和列表的数据对比 相同的话就禁用掉 并且id不等于当前选中的那一条this.disabledCoupon是父组件选中的数据。表格里的属性 一定要去看表格的api 我 一开始还傻不拉几看单选radio的属性 代码里的表格是封装过的 s-table不是a-table 所以要看清楚!但是属性什么
·
表格里的属性 一定要去看表格的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 是设置点击整行的数据触发的事件 当时我设了 这个值 单选框那个框框是不可选 但是我点击当前那一行 还是可以勾选上的 所以这个属性要去掉
更多推荐
已为社区贡献2条内容
所有评论(0)