目录
1、方法代码
computed: {
rowSelection() {
const _this = this
const { selectedRowKeys } = this
return {
selectedRowKeys,
onChange: (selectedRowKeys, selectionRows) => {
this.selectedRowKeys = selectedRowKeys;
this.selectionRows = selectionRows;
},
getCheckboxProps: (record) => ({
props: {
// 全部默认禁止选中
// disabled: true,
// 某几项默认禁止选中(R: 当state等于1时)
disabled: record.id=='合计',
// 某几项默认选中(R: 当state等于1时)
// defaultChecked: record.state == 1,
},
}),
}
},
},

2、列表代码
<!-- table区域-begin -->
<div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="rowSelection"
@change="handleTableChange">
<span slot="action_rowIndex" slot-scope="text, record, index">
<span v-if="record.id=='合计'">
合计
</span>
<span v-else>
<span v-if="ipagination.current=='1'">{{parseInt(index)}}</span>
<span v-else>{{parseInt(index)+1}}</span>
</span>
</span>
</a-table>
</div>
<!-- table区域-end -->
3、参考资料
1、antDesignForVue 符合条件的表格复选框禁止选中
https://blog.youkuaiyun.com/bbsyi/article/details/108992302
4、代码文件
说明:后端查询记录后,在计算合计时,合计记录的id赋值为“合计”,可实现该效果。
Vue中实现表格行禁选功能
文章介绍了一种在Vue应用中使用AntDesignforVue的A-Table组件时,如何通过computed属性设置rowSelection来实现特定行的禁选功能,特别是当记录ID为合计时,自动禁选。此外,还提供了列表代码示例,展示如何处理行选择变化和自定义列显示。
2157






