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