feat: 支持表头必填自动判断并优化模式切换渲染

liuhanchen
1 parent caa734fa
Showing 3 changed files with 70 additions and 11 deletions Show diff stats
packages/table/editor.vue
packages/table/index.vue
packages/utils/vnode.js
 <script>
 import { get, set, cloneDeep } from '../utils';
-import { renderContext } from '../utils/vnode';
+import { renderContext, setDefaultContextClass } from '../utils/vnode';
+
+// 配置是否必填
+function isItemRequired(context, config) {
+  // 渲染函数配置
+  const contentProps = context.props || {};
+  // 编辑器统一配置
+  const editorConfig = contentProps.editor || {};
+  let result = false;
+  if (!editorConfig.items) {
+    return false;
+  }
+  for (let item of editorConfig.items) {
+    if (item.prop === config.prop && item.rules) {
+      for (let rule of item.rules) {
+        if (rule.required) {
+          result = true;
+          break;
+        }
+      }
+    }
+  }
+  return result;
+}
 // 标题渲染
 function headerRender(h, context, item) {
+  // 表头插槽
   const headerSlot = context.scopedSlots[`header-${item.prop}`];
+  const required = isItemRequired(context, item);
   return function(scope) {
+    scope.required = required;
     // 自定义具名插槽
     if (headerSlot) {
       return headerSlot(scope);
@@ -14,6 +40,10 @@ function headerRender(h, context, item) {
     if (item.header) {
       return item.header(item, h, scope);
     }
+    // 如果是必填项
+    if (required) {
+      return h('span', { class: 'required' }, item.label);
+    }
     // 默认取值
     return item.label;
   };
@@ -65,7 +95,7 @@ function editorRender(h, context, item) {
     let vnode = {};
     // 默认
     const inputEvent = val => {
-      if (get(contentProps, 'editor.deep') === true) {
+      if (get(contentProps, 'editor.props.deep') === true) {
         if (item.prop.indexOf('.') > -1 || item.prop.indexOf('[') > -1) {
           let separator = '';
           if (item.prop.indexOf('.') > -1) {
@@ -147,9 +177,8 @@ export default {
     console.log(context);
     const props = context.props || {};
     // 设置默认class名称，用来追加一些默认的样式
-    const className = get(context, 'data.class');
-    set(context, 'data.class', className ? `${className} z-table-editor` : 'z-table-editor');
     let scopedSlots = context.scopedSlots || {};
+    setDefaultContextClass(context, 'z-table-editor');
     // 如有默认插槽则相当于直接写el-table
     if (scopedSlots.default) {
       return h('el-table', context);
@@ -175,12 +204,17 @@ export default {
 <style lang="scss">
 .z-table-editor {
   &.el-table td .cell {
-    padding-top: 2px !important;
-    padding-bottom: 2px !important;
-    padding-right: 2px !important;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-right: 2px;
+  }
+  &.el-table td .cell .el-form-item {
+    margin-bottom: 0;
   }
-  .el-form-item {
-    margin-bottom: 0 !important;
+  &.el-table th.el-table__cell .required::before {
+    content: '*';
+    color: red;
+    margin-right: 4px;
   }
 }
 </style>
 <script>
-import { ref } from '../utils/vnode';
+import { ref, setDefaultContextKey } from '../utils/vnode';
 export default {
   name: 'Table',
@@ -7,11 +7,14 @@ export default {
   render(h, context) {
     const props = context.props || {};
     if (Object.prototype.hasOwnProperty.call(props, 'editable') && props.editable !== false) {
+      setDefaultContextKey(context, 'editable');
       return h('z-table-editable', { props, scopedSlots: context.scopedSlots, on: context.listeners });
     }
-    if (Object.prototype.hasOwnProperty.call(props, 'editor')) {
+    if (Object.prototype.hasOwnProperty.call(props, 'editor') && props.editor) {
+      setDefaultContextKey(context, 'editor');
       return ref('z-table-editor', context);
     }
+    setDefaultContextKey(context, 'normal');
     return ref('z-table-normal', context);
   },
 };
+import { set, get } from '../utils';
+
 // 注册函数式组件ref
 export function registerRef(vnode, context) {
   if (!context.data.ref || !vnode.data.hook) {
@@ -52,7 +54,27 @@ export function renderContext(context) {
   return result;
 }
+// 设置默认渲染key
+export function setDefaultContextKey(context, key) {
+  const defaultKey = get(context, 'data.key');
+  if (!defaultKey) {
+    set(context, 'data.key', key);
+  }
+}
+
+// 设置默认class
+export function setDefaultContextClass(context, className) {
+  const defaultClass = get(context, 'data.staticClass');
+  if (!defaultClass) {
+    set(context, 'data.staticClass', className);
+  } else {
+    set(context, 'data.staticClass', `${defaultClass} ${className}`);
+  }
+}
+
 export default {
   registerRef,
   ref,
+  setDefaultContextKey,
+  setDefaultContextClass,
 };
		1	+import { set, get } from '../utils';
		2	+
1	// 注册函数式组件ref	3	// 注册函数式组件ref
2	export function registerRef(vnode, context) {	4	export function registerRef(vnode, context) {
3	if (!context.data.ref \|\| !vnode.data.hook) {	5	if (!context.data.ref \|\| !vnode.data.hook) {
	@@ -52,7 +54,27 @@ export function renderContext(context) {		@@ -52,7 +54,27 @@ export function renderContext(context) {
52	return result;	54	return result;
53	}	55	}
54		56
		57	+// 设置默认渲染key
		58	+export function setDefaultContextKey(context, key) {
		59	+ const defaultKey = get(context, 'data.key');
		60	+ if (!defaultKey) {
		61	+ set(context, 'data.key', key);
		62	+ }
		63	+}
		64	+
		65	+// 设置默认class
		66	+export function setDefaultContextClass(context, className) {
		67	+ const defaultClass = get(context, 'data.staticClass');
		68	+ if (!defaultClass) {
		69	+ set(context, 'data.staticClass', className);
		70	+ } else {
		71	+ set(context, 'data.staticClass', `${defaultClass} ${className}`);
		72	+ }
		73	+}
		74	+
55	export default {	75	export default {
56	registerRef,	76	registerRef,
57	ref,	77	ref,
		78	+ setDefaultContextKey,
		79	+ setDefaultContextClass,
58	};	80	};