Ant Design Vue Table 组件 getCheckboxProps 事件

最新推荐文章于 2026-01-10 16:57:11 发布

原创最新推荐文章于 2026-01-10 16:57:11 发布 · 2.1k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Ant Design of Vue

当前文章被收录于：

Ant Design of Vue

5 篇文章 0 人学习

记录工作中或学习中遇到的 Antd 框架库的问题及解决办法

订阅专栏查看详情

当前文章被以下社区和专栏收录：

代码可运行

在AntDesignVue1.7.8版本中，通过Table组件的getCheckboxProps方法，可以实现根据数据状态动态禁用某一行的勾选功能。例如，当记录的status属性等于1时，该行将被禁用，无法被选中。此功能适用于需要控制用户选择行为的场景。

Ant Design Vue Table 组件 getCheckboxProps 可选择事件

版本

Ant Design Vue 版本 1.7.8
Vue 版本 2.X

实现效果

在这里插入图片描述
达到一定的条件、禁用某一行，不能勾选这一行

代码实现

<template>
	<a-table
		:columns="columns"
	    :dataSource="data"
	    :rowSelection="{
	      getCheckboxProps: this.disableCheckd
	    }">
	</a-table
</template>

<script>
export default {
	data() {
		columns: [],
		data: []
	},
	methods: {
		disableCheckd(record) {
			// record 拿到这一行数据、通过 status 属性判断、当 disabled 等于 true 时禁用此行
			return ({
				props: {
					disabled: record.status === 1
				}
			})
		}
	}
}
</script>