ant-design-vue ant-table 实现默认选中 且不影响之后的勾选切换

一般情况下都是加载出来列表之后进行全选的操作,这样ant-table官网的一般选中就能满足,可是公司领导给的需求是列表数据一加载就是默认选中的操作。使用

:row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelect, getCheckboxProps: getCheckbox }">

当中的

selectedRowKeys: selectedRowKey, onChange: onSelect

这两个属性结合,默认将数据的ID 数组赋值selectedRowKey 页面加载出来是全选的效果,但是切换点击勾选失效,不能使用。

经过多方查找看到网友使用的时候加有这个参数

getCheckboxProps: getCheckbox

js部分的代码是

const getCheckbox = (record) => {
	return {
		defaultChecked: selectRows.value.some(selectedRecord => selectedRecord.modalInfo.shopCarId === record.modalInfo.shopCarId)
	};
}

使用的时候js代码

const onSelect = (selectedRowKeys, selectedRows) => {
	console.log(selectedRowKeys, selectedRows, '批量编辑');
	selectedRowKey.value = selectedRowKeys
	selectRows.value = selectedRows
}
watch(() => selectRows.value.length, () => {
	num1.value = 0
	countnum2.value=0
	allprice.value = 0
	selectRows.value.forEach((item) => {
		num1.value++
		countnum2.value += item.number
		if (item.totalPrice != null && item.textPrice !== '人工报价中' && item.totalPrice != 0) {
			allprice.value = allprice.value + (item.totalPrice * 1)
		}
	})
})

 还有这个在合适的位置加

selectedRowKey.value = selectRows.value.map(item => item.modalInfo.shopCarId)

不然,选中效果不会有。在此感谢 vue ant-design中table选中默认项的实现_row-selection 默认勾选_reembarkation的博客-CSDN博客

给了很大的帮助

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值