frontend / zee

Download as
Browse Code »

Commit 01950ddf5b43265b013d40cb56482ea52a75d35c

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

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

Showing 3 changed files with 70 additions and 11 deletions   Show diff stats
packages/table/editor.vue
  Diff comments   View file @01950dd
1 1 <script>
2 2 import { get, set, cloneDeep } from '../utils';
3   -import { renderContext } from '../utils/vnode';
  3 +import { renderContext, setDefaultContextClass } from '../utils/vnode';
  4 +
  5 +// 配置是否必填
  6 +function isItemRequired(context, config) {
  7 + // 渲染函数配置
  8 + const contentProps = context.props || {};
  9 + // 编辑器统一配置
  10 + const editorConfig = contentProps.editor || {};
  11 + let result = false;
  12 + if (!editorConfig.items) {
  13 + return false;
  14 + }
  15 + for (let item of editorConfig.items) {
  16 + if (item.prop === config.prop && item.rules) {
  17 + for (let rule of item.rules) {
  18 + if (rule.required) {
  19 + result = true;
  20 + break;
  21 + }
  22 + }
  23 + }
  24 + }
  25 + return result;
  26 +}
4 27  
5 28 // 标题渲染
6 29 function headerRender(h, context, item) {
  30 + // 表头插槽
7 31 const headerSlot = context.scopedSlots[`header-${item.prop}`];
  32 + const required = isItemRequired(context, item);
8 33 return function(scope) {
  34 + scope.required = required;
9 35 // 自定义具名插槽
10 36 if (headerSlot) {
11 37 return headerSlot(scope);
... ... @@ -14,6 +40,10 @@ function headerRender(h, context, item) {
14 40 if (item.header) {
15 41 return item.header(item, h, scope);
16 42 }
  43 + // 如果是必填项
  44 + if (required) {
  45 + return h('span', { class: 'required' }, item.label);
  46 + }
17 47 // 默认取值
18 48 return item.label;
19 49 };
... ... @@ -65,7 +95,7 @@ function editorRender(h, context, item) {
65 95 let vnode = {};
66 96 // 默认
67 97 const inputEvent = val => {
68   - if (get(contentProps, 'editor.deep') === true) {
  98 + if (get(contentProps, 'editor.props.deep') === true) {
69 99 if (item.prop.indexOf('.') > -1 || item.prop.indexOf('[') > -1) {
70 100 let separator = '';
71 101 if (item.prop.indexOf('.') > -1) {
... ... @@ -147,9 +177,8 @@ export default {
147 177 console.log(context);
148 178 const props = context.props || {};
149 179 // 设置默认class名称，用来追加一些默认的样式
150   - const className = get(context, 'data.class');
151   - set(context, 'data.class', className ? `${className} z-table-editor` : 'z-table-editor');
152 180 let scopedSlots = context.scopedSlots || {};
  181 + setDefaultContextClass(context, 'z-table-editor');
153 182 // 如有默认插槽则相当于直接写el-table
154 183 if (scopedSlots.default) {
155 184 return h('el-table', context);
... ... @@ -175,12 +204,17 @@ export default {
175 204 <style lang="scss">
176 205 .z-table-editor {
177 206 &.el-table td .cell {
178   - padding-top: 2px !important;
179   - padding-bottom: 2px !important;
180   - padding-right: 2px !important;
  207 + padding-top: 2px;
  208 + padding-bottom: 2px;
  209 + padding-right: 2px;
  210 + }
  211 + &.el-table td .cell .el-form-item {
  212 + margin-bottom: 0;
181 213 }
182   - .el-form-item {
183   - margin-bottom: 0 !important;
  214 + &.el-table th.el-table__cell .required::before {
  215 + content: '*';
  216 + color: red;
  217 + margin-right: 4px;
184 218 }
185 219 }
186 220 </style>
... ...
packages/table/index.vue
  Diff comments   View file @01950dd
1 1 <script>
2   -import { ref } from '../utils/vnode';
  2 +import { ref, setDefaultContextKey } from '../utils/vnode';
3 3  
4 4 export default {
5 5 name: 'Table',
... ... @@ -7,11 +7,14 @@ export default {
7 7 render(h, context) {
8 8 const props = context.props || {};
9 9 if (Object.prototype.hasOwnProperty.call(props, 'editable') && props.editable !== false) {
  10 + setDefaultContextKey(context, 'editable');
10 11 return h('z-table-editable', { props, scopedSlots: context.scopedSlots, on: context.listeners });
11 12 }
12   - if (Object.prototype.hasOwnProperty.call(props, 'editor')) {
  13 + if (Object.prototype.hasOwnProperty.call(props, 'editor') && props.editor) {
  14 + setDefaultContextKey(context, 'editor');
13 15 return ref('z-table-editor', context);
14 16 }
  17 + setDefaultContextKey(context, 'normal');
15 18 return ref('z-table-normal', context);
16 19 },
17 20 };
... ...
packages/utils/vnode.js
  Diff comments   View file @01950dd
  1 +import { set, get } from '../utils';
  2 +
1 3 // 注册函数式组件ref
2 4 export function registerRef(vnode, context) {
3 5 if (!context.data.ref || !vnode.data.hook) {
... ... @@ -52,7 +54,27 @@ export function renderContext(context) {
52 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 75 export default {
56 76 registerRef,
57 77 ref,
  78 + setDefaultContextKey,
  79 + setDefaultContextClass,
58 80 };
... ...