feat: 优化虚拟节点渲染

liuhanchen
1 parent 98832d95
Showing 3 changed files with 48 additions and 4 deletions Show diff stats
packages/schema-page/index.vue
packages/table/normal.vue
packages/utils/vnode.js
@@ -36,9 +36,15 @@
       </slot>
     </div>
     <!-- 表格内容 -->
-    <div v-if="schema.table || $scopedSlots.table" class="z-schema-page__table" v-loading="schema.loading !== false ? tableLoading : false">
+    <div v-if="schema.table || $scopedSlots.table" class="z-schema-page__table">
       <slot name="table" v-bind="_slotScope">
-        <z-schema-table :size="_size" :schema="tableSchemaDefaultProps(schema.table)" :data="tableData" @selection-change="onTableSelectionChange">
+        <z-schema-table
+          v-loading="schema.loading !== false ? tableLoading : false"
+          :size="_size"
+          :schema="tableSchemaDefaultProps(schema.table)"
+          :data="tableData"
+          @selection-change="onTableSelectionChange"
+        >
           <template #prepend>
             <slot name="table-prepend">
               <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
 <script>
 import { get } from '../utils';
+import { renderContext } from '../utils/vnode';
 // 标题渲染
 function headerRender(h, context, item) {
@@ -63,11 +64,15 @@ export default {
     const elTableColumns = createElTableColumns(h, context, columns);
     // 前置插槽
     const prependSlot = scopedSlots.prepend ? scopedSlots.prepend() : '';
+    // 左侧插槽
+    const leftSlot = scopedSlots.left ? scopedSlots.left() : '';
+    // 右侧插槽
+    const rightSlot = scopedSlots.right ? scopedSlots.right() : '';
     // 后置插槽
     const appendSlot = scopedSlots.append ? scopedSlots.append() : '';
     // 渲染组件时移除当前组件特有的props，避免透传不必要的参数
     delete context.columns;
-    return h('el-table', context, [prependSlot, ...elTableColumns, appendSlot]);
+    return h('el-table', renderContext(context), [prependSlot, leftSlot, ...elTableColumns, rightSlot, appendSlot]);
   },
 };
 </script>
@@ -16,7 +16,40 @@ export function registerRef(vnode, context) {
 // 简写注册ref
 export function ref(name, context) {
-  return registerRef(context._c(name, context), context);
+  const vnode = context._c(name, renderContext(context));
+  return registerRef(vnode, context);
+}
+
+// 清除attrs上的数组和对象，仅用props传递
+function clearAttrs(attrs) {
+  const newAttrs = Object.assign({}, attrs);
+  Object.keys(newAttrs).forEach(key => {
+    if (typeof newAttrs[key] === 'function' || typeof newAttrs[key] === 'object') {
+      delete newAttrs[key];
+    }
+  });
+  delete newAttrs.slot;
+  return newAttrs;
+}
+
+// 渲染函数式组件context
+export function renderContext(context) {
+  const result = {
+    staticClass: context.data.staticClass,
+    class: context.data.class,
+    staticStyle: context.data.staticStyle,
+    style: context.data.style,
+    attrs: clearAttrs(context.data.attrs),
+    props: context.props,
+    on: context.listeners,
+    directives: context.data.directives,
+    scopedSlots: context.scopedSlots,
+    slot: context.data.slot,
+    key: context.data.key,
+    ref: context.data.ref,
+    refInFor: true,
+  };
+  return result;
 }
 export default {
	@@ -16,7 +16,40 @@ export function registerRef(vnode, context) {		@@ -16,7 +16,40 @@ export function registerRef(vnode, context) {
16		16
17	// 简写注册ref	17	// 简写注册ref
18	export function ref(name, context) {	18	export function ref(name, context) {
19	- return registerRef(context._c(name, context), context);	19	+ const vnode = context._c(name, renderContext(context));
		20	+ return registerRef(vnode, context);
		21	+}
		22	+
		23	+// 清除attrs上的数组和对象，仅用props传递
		24	+function clearAttrs(attrs) {
		25	+ const newAttrs = Object.assign({}, attrs);
		26	+ Object.keys(newAttrs).forEach(key => {
		27	+ if (typeof newAttrs[key] === 'function' \|\| typeof newAttrs[key] === 'object') {
		28	+ delete newAttrs[key];
		29	+ }
		30	+ });
		31	+ delete newAttrs.slot;
		32	+ return newAttrs;
		33	+}
		34	+
		35	+// 渲染函数式组件context
		36	+export function renderContext(context) {
		37	+ const result = {
		38	+ staticClass: context.data.staticClass,
		39	+ class: context.data.class,
		40	+ staticStyle: context.data.staticStyle,
		41	+ style: context.data.style,
		42	+ attrs: clearAttrs(context.data.attrs),
		43	+ props: context.props,
		44	+ on: context.listeners,
		45	+ directives: context.data.directives,
		46	+ scopedSlots: context.scopedSlots,
		47	+ slot: context.data.slot,
		48	+ key: context.data.key,
		49	+ ref: context.data.ref,
		50	+ refInFor: true,
		51	+ };
		52	+ return result;
20	}	53	}
21		54
22	export default {	55	export default {