默认选中不生效相关代码 html
<a-table
v-if="dataSource && dataSource.length>0 || show"
class="h-table"
:loading="tableLoading"
:dataSource="dataSource"
:defaultExpandAllRows="true"
:columns="tableColumn"
:scroll="scroll"
:pagination="false"
tableLayout="fixed"
@resizeColumn="handleResizeColumn"
:row-selection="isSelect ? rowSelection : null"
>
</a-table>
vue script
const rowSelection = reactive({
checkStrictly: props.checkStrictly,
selectedRowKeys:props.selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
emits('batch', selectedRowKeys, selectedRows);
},
getCheckboxProps: (record: any) => ({
disabled: record.name === 'disabled',
name: record.name,
defaultChecked: true
})
})
组件是经过二次封装的,需要传入的props.selectedRowKeys为默认选中,selectedRowKeys,defaultChecked 这两个属性是和选中相关的,无论怎么改都不生效
猜测是因为selectedRowKeys发生变化时,getCheckboxProps,selectedRowKeys相关属性没有动态变化,监听属性变化,重新设置后生效
watch(()=>props.selectedRowKeys,val=>{
rowSelection.selectedRowKeys = val
rowSelection.checkStrictly = props.checkStrictly,
rowSelection.getCheckboxProps = (record: any) => ({
disabled: record.name === 'disabled',
name: record.name,
defaultChecked: val?.includes(record.id)
})
})
这样默认选中生效了,但是又有问题,选择框无法使用了
selectedRowKeys 是表格选中数据,如果数据写死,选择框相当于绑定固定数据,需要配合onChange使用,触发选中时修改值
watch(()=>props.selectedRowKeys,val=>{
rowSelection.selectedRowKeys = val
rowSelection.checkStrictly = props.checkStrictly,
rowSelection.onChange = (selectedRowKeys: any, selectedRows: any) => {
rowSelection.selectedRowKeys = [...selectedRowKeys]
emits('batch', selectedRowKeys, selectedRows);
}
rowSelection.getCheckboxProps = (record: any) => ({
disabled: record.name === 'disabled',
name: record.name,
defaultChecked: val?.includes(record.id)
})
})