参考文档:
vben admin——Table
ant design vue——table
切入点 rowSelection 选择列配置
找源码:
1、BasicTable.vue
重点代码:
v-bind="getBindValues"
rowSelection: unref(getRowSelectionRef);
const {
getRowSelection,
getRowSelectionRef,
getSelectRows,
clearSelectedRowKeys,
getSelectRowKeys,
deleteSelectRowByKey,
setSelectedRowKeys,
} = useRowSelection(getProps, tableData, emit);
useRowSelection;
2、useRowSelection.ts
重点代码:
getRowSelectionRef();
重点:onChange()、getCheckboxProps()、onSelect() 这三个函数
const getRowSelectionRef = computed((): TableRowSelection | null => {
const { rowSelection } = unref(propsRef);
if (!rowSelection) {
return null;
}
return {
selectedRowKeys: unref(selectedRowKeysRef),
hideDefaultSelections: false,
// 选中项发生变化时的回调
onChange: (selectedRowKeys: string[]) => {
setSelectedRowKeys(selectedRowKeys);
// selectedRowKeysRef.value = selectedRowKeys;
// selectedRowRef.value = selectedRows;
},
//选择框的默认属性配置:如可设置是否可选
getCheckboxProps: (record) => {
return {
disabled: false, // Column configuration not to be checked
};
},
// 用户手动选择/取消选择某列的回调
onSelect: (...args) => {
return { ...args };
},
...omit(rowSelection, ["onChange"]),
};
});
6196

被折叠的 条评论
为什么被折叠?



