43 lines
1.6 KiB
JavaScript
43 lines
1.6 KiB
JavaScript
import { h } from "vue";
|
|
|
|
// ── 静态常量（避免每次渲染重复创建） ────────────────────────
|
|
|
|
const stopBubble = (e) => e.stopPropagation();
|
|
|
|
// ── 基础工厂 ────────────────────────────────────────────────
|
|
|
|
/**
|
|
* 通用 cell 渲染器工厂。
|
|
*
|
|
* 返回的函数是纯渲染函数，不保存 row 引用、不产生额外组件层级。
|
|
*
|
|
* @param {object} config
|
|
* @param {object} config.component Vue 组件（Button / Checkbox / Select …）
|
|
* @param {object} [config.props] 静态 props（创建一次，不随行变化）
|
|
* @param {(row, col, ctx) => object} [config.getProps] 动态 props（每次 cell 渲染调用）
|
|
* @param {(row, col, ctx) => object} [config.getChildren] 动态 children / slots
|
|
* @param {boolean} [config.stopPropagation=true] 自动注入 onClick stopPropagation
|
|
* @returns {Function} (ctx) => VNode customCell 渲染函数
|
|
*/
|
|
export function createCellRenderer({
|
|
component,
|
|
props = {},
|
|
getProps,
|
|
getChildren,
|
|
stopPropagation = true,
|
|
}) {
|
|
return (ctx) => {
|
|
const merged = getProps ? { ...props, ...getProps(ctx.row, ctx.col, ctx) } : { ...props };
|
|
|
|
if (stopPropagation) {
|
|
const click = merged.onClick;
|
|
merged.onClick = click ? (e) => (e.stopPropagation(), click(e)) : stopBubble;
|
|
}
|
|
|
|
const children = getChildren ? getChildren(ctx.row, ctx.col, ctx) : undefined;
|
|
return h(component, merged, children);
|
|
};
|
|
}
|
|
|
|
|