一般情况下都是加载出来列表之后进行全选的操作,这样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博客

给了很大的帮助

Logo

前往低代码交流专区

更多推荐