frontend / zee

Download as
Browse Code »

Commit 366ae976735ba10a27df0a0b951f26416c1c579a

Authored by liuhanchen
1 parent 28d58627
Exists in master and in 1 other branch Feature-渲染优化

feat: 优化兼容性

Showing 2 changed files with 44 additions and 18 deletions   Show diff stats
packages/table/editor.vue
  Diff comments   View file @366ae97
... ... @@ -87,7 +87,7 @@ function formItemRender(h, context, item, scope, children) {
87 87 return h(
88 88 editorProps.formItem || 'el-form-item',
89 89 {
90   - props: { prop: formItemProp, rules: item.rules || editorRules[item.prop], 'inline-message': true },
  90 + props: { prop: formItemProp, rules: item.rules || editorRules[item.prop], inlineMessage: true },
91 91 },
92 92 children,
93 93 );
... ... @@ -101,6 +101,13 @@ function editorRender(h, context, item) {
101 101 const value = get(scope.row, item.prop);
102 102 let vnode = {};
103 103 // 默认
  104 + const setValue = val => {
  105 + if (get(contentProps, 'editor.force') === true) {
  106 + vnode.componentInstance.$set(scope.row, item.prop, val);
  107 + } else {
  108 + scope.row[item.prop] = val;
  109 + }
  110 + };
104 111 const inputEvent = val => {
105 112 if (get(contentProps, 'editor.deep') === true) {
106 113 if (item.prop.indexOf('.') > -1 || item.prop.indexOf('[') > -1) {
... ... @@ -116,12 +123,10 @@ function editorRender(h, context, item) {
116 123 set(propValue, item.prop, val);
117 124 vnode.componentInstance.$set(scope.row, bindProp, propValue[bindProp]);
118 125 } else {
119   - // set(scope.row, item.prop, val);
120   - scope.row[item.prop] = val;
  126 + setValue(val);
121 127 }
122 128 } else {
123   - scope.row[item.prop] = val;
124   - // set(contentProps.data, `[${[scope.$index]}]${item.prop}`, val);
  129 + setValue(val);
125 130 }
126 131 if (item.on && item.on.input) {
127 132 item.on.input(val);
... ... @@ -168,6 +173,13 @@ function createElTableColumns(h, context, columns) {
168 173 if (context.scopedSlots[`editor-${item.prop}`] && !editorItem) {
169 174 editorItem = item;
170 175 }
  176 + if (isEditor) {
  177 + if (props.className) {
  178 + props.className = [props.className, 'column-editor'].filter(i => i).join(' ');
  179 + } else {
  180 + props.className = 'column-editor';
  181 + }
  182 + }
171 183 // 处理插槽
172 184 const scopedSlots = {
173 185 header: headerRender(h, context, item),
... ... @@ -181,7 +193,6 @@ export default {
181 193 name: 'TableEditor',
182 194 functional: true,
183 195 render(h, context) {
184   - console.log(context);
185 196 const props = context.props || {};
186 197 // 设置默认class名称，用来追加一些默认的样式
187 198 let scopedSlots = context.scopedSlots || {};
... ... @@ -203,6 +214,11 @@ export default {
203 214 const appendSlot = scopedSlots.append ? scopedSlots.append() : '';
204 215 // 渲染组件时移除当前组件特有的props，避免透传不必要的参数
205 216 delete context.columns;
  217 + // 兼容旧版value属性
  218 + if (context.props.value && !context.props.data) {
  219 + context.props.data = context.props.value;
  220 + delete context.props.value;
  221 + }
206 222 return h('el-table', renderContext(context), [prependSlot, leftSlot, ...elTableColumns, rightSlot, appendSlot]);
207 223 },
208 224 };
... ... @@ -210,18 +226,23 @@ export default {
210 226  
211 227 <style lang="scss">
212 228 .z-table-editor {
213   - &.el-table td .cell {
214   - padding-top: 2px;
215   - padding-bottom: 2px;
216   - padding-right: 2px;
217   - }
218   - &.el-table td .cell .el-form-item {
219   - margin-bottom: 0;
220   - }
221   - &.el-table th.el-table__cell .required::before {
222   - content: '*';
223   - color: red;
224   - margin-right: 4px;
  229 + .column-editor {
  230 + .cell {
  231 + padding: 2px;
  232 + .el-form-item {
  233 + margin-bottom: 0;
  234 + &.is-error {
  235 + ::placeholder {
  236 + color: red;
  237 + }
  238 + }
  239 + }
  240 + .required::before {
  241 + content: '*';
  242 + color: red;
  243 + margin-right: 4px;
  244 + }
  245 + }
225 246 }
226 247 }
227 248 </style>
... ...
packages/table/normal.vue
  Diff comments   View file @366ae97
... ... @@ -78,6 +78,11 @@ export default {
78 78 const appendSlot = scopedSlots.append ? scopedSlots.append() : '';
79 79 // 渲染组件时移除当前组件特有的props，避免透传不必要的参数
80 80 delete context.columns;
  81 + // 兼容旧版value属性
  82 + if (context.props.value && !context.props.data) {
  83 + context.props.data = context.props.value;
  84 + delete context.props.value;
  85 + }
81 86 return h('el-table', renderContext(context), [prependSlot, leftSlot, ...elTableColumns, rightSlot, appendSlot]);
82 87 },
83 88 };
... ...