feat: 优化兼容性

liuhanchen
1 parent 28d58627
Showing 2 changed files with 44 additions and 18 deletions Show diff stats
packages/table/editor.vue
packages/table/normal.vue
@@ -87,7 +87,7 @@ function formItemRender(h, context, item, scope, children) {
   return h(
     editorProps.formItem || 'el-form-item',
     {
-      props: { prop: formItemProp, rules: item.rules || editorRules[item.prop], 'inline-message': true },
+      props: { prop: formItemProp, rules: item.rules || editorRules[item.prop], inlineMessage: true },
     },
     children,
   );
@@ -101,6 +101,13 @@ function editorRender(h, context, item) {
     const value = get(scope.row, item.prop);
     let vnode = {};
     // 默认
+    const setValue = val => {
+      if (get(contentProps, 'editor.force') === true) {
+        vnode.componentInstance.$set(scope.row, item.prop, val);
+      } else {
+        scope.row[item.prop] = val;
+      }
+    };
     const inputEvent = val => {
       if (get(contentProps, 'editor.deep') === true) {
         if (item.prop.indexOf('.') > -1 || item.prop.indexOf('[') > -1) {
@@ -116,12 +123,10 @@ function editorRender(h, context, item) {
           set(propValue, item.prop, val);
           vnode.componentInstance.$set(scope.row, bindProp, propValue[bindProp]);
         } else {
-          // set(scope.row, item.prop, val);
-          scope.row[item.prop] = val;
+          setValue(val);
         }
       } else {
-        scope.row[item.prop] = val;
-        // set(contentProps.data, `[${[scope.$index]}]${item.prop}`, val);
+        setValue(val);
       }
       if (item.on && item.on.input) {
         item.on.input(val);
@@ -168,6 +173,13 @@ function createElTableColumns(h, context, columns) {
     if (context.scopedSlots[`editor-${item.prop}`] && !editorItem) {
       editorItem = item;
     }
+    if (isEditor) {
+      if (props.className) {
+        props.className = [props.className, 'column-editor'].filter(i => i).join(' ');
+      } else {
+        props.className = 'column-editor';
+      }
+    }
     // 处理插槽
     const scopedSlots = {
       header: headerRender(h, context, item),
@@ -181,7 +193,6 @@ export default {
   name: 'TableEditor',
   functional: true,
   render(h, context) {
-    console.log(context);
     const props = context.props || {};
     // 设置默认class名称，用来追加一些默认的样式
     let scopedSlots = context.scopedSlots || {};
@@ -203,6 +214,11 @@ export default {
     const appendSlot = scopedSlots.append ? scopedSlots.append() : '';
     // 渲染组件时移除当前组件特有的props，避免透传不必要的参数
     delete context.columns;
+    // 兼容旧版value属性
+    if (context.props.value && !context.props.data) {
+      context.props.data = context.props.value;
+      delete context.props.value;
+    }
     return h('el-table', renderContext(context), [prependSlot, leftSlot, ...elTableColumns, rightSlot, appendSlot]);
   },
 };
@@ -210,18 +226,23 @@ export default {
 <style lang="scss">
 .z-table-editor {
-  &.el-table td .cell {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-right: 2px;
-  }
-  &.el-table td .cell .el-form-item {
-    margin-bottom: 0;
-  }
-  &.el-table th.el-table__cell .required::before {
-    content: '*';
-    color: red;
-    margin-right: 4px;
+  .column-editor {
+    .cell {
+      padding: 2px;
+      .el-form-item {
+        margin-bottom: 0;
+        &.is-error {
+          ::placeholder {
+            color: red;
+          }
+        }
+      }
+      .required::before {
+        content: '*';
+        color: red;
+        margin-right: 4px;
+      }
+    }
   }
 }
 </style>
@@ -78,6 +78,11 @@ export default {
     const appendSlot = scopedSlots.append ? scopedSlots.append() : '';
     // 渲染组件时移除当前组件特有的props，避免透传不必要的参数
     delete context.columns;
+    // 兼容旧版value属性
+    if (context.props.value && !context.props.data) {
+      context.props.data = context.props.value;
+      delete context.props.value;
+    }
     return h('el-table', renderContext(context), [prependSlot, leftSlot, ...elTableColumns, rightSlot, appendSlot]);
   },
 };