ant-design-vue中table组件复选框默认值设置

ant-design-vue中table组件复选框默认值设置

1、最终实现效果

2、代码示例

（1）template代码片段

<a-table
    :dataSource="dataSource"
    :columns="columns"
    :pagination="false"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :row-key="(record) => record.key"
>
</a-table>

（2）script代码片段

export default {
	watch: {
		open(newValue) {
            // 当弹窗打开的时候，给复选框设置默认选中的数据
			if (this.chooseData.length && newValue) {
				this.selectedRowKeys = this.chooseData.map((item) => item.key)
			} else if (newValue && !this.chooseData.length) {
				this.selectedRowKeys = []
				this.pagination.current = 1
			}
		}
	},
	data() {
		return {
			dataSource: [],
			columns: [
				{
					title: '序号',
					dataIndex: 'key',
					key: 'key',
					align: 'center'
				},
				{
					title: '机构名称',
					dataIndex: 'name',
					key: 'mane',
					align: 'center'
				},
				{
					title: '机构等级',
					dataIndex: 'sex',
					key: 'sex',
					align: 'center'
				},
				{
					title: '机构性质',
					dataIndex: 'phoneNumber',
					key: 'phoneNumber',
					align: 'center'
				}
			],
			selectedRowKeys: [],
		}
	},
	methods: {
		// 复选框操作
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
		},
	}
}