framework / eagle-web-toolkit

Download as
Browse Code »

Commit 600fee60a54f57d0d026c2c3bd5cc0e17f43fcab

Authored by Aaron
1 parent 004eaf47
Exists in master and in 1 other branch legacy

优化新式表格渲染逻辑

Showing 4 changed files with 40 additions and 20 deletions   Show diff stats
examples/views/page/other.vue
  Diff comments   View file @600fee6
... ... @@ -39,7 +39,7 @@
39 39  
40 40 <script>
41 41 import EgForm from './form-new';
42   -import EgTable from './table-new/editable';
  42 +import EgTable from './table-new';
43 43  
44 44 export default {
45 45 name: 'other',
... ... @@ -59,7 +59,11 @@ export default {
59 59 group: { title: '基础信息', span: 12 },
60 60 list: [
61 61 { type: 'el-input', label: '名称', key: 'name' },
62   - { type: 'el-input-number', label: '年龄', key: 'age' },
  62 + { type: 'el-input-number', label: '年龄', key: 'age',
  63 + render(h, { row, value }) {
  64 + return h('el-tag', { props: { type: 'warning', size: 'mini' } }, [h('span', `${value}[${row.name}]`)])
  65 + }
  66 + },
63 67 ],
64 68 },
65 69 {
... ...
examples/views/page/table-new/cell-value-render.js 0 → 100644
  Diff comments   View file @600fee6
... ... @@ -0,0 +1,24 @@
  1 +import { get } from '../form-new/util';
  2 +
  3 +export default {
  4 + props: { row: Object, column: Object, index: [Number,String], item: Object },
  5 + render(h) {
  6 + const { row, column, index, item } = this;
  7 + if (typeof item.render === 'function') {
  8 + return item.render(h, { row, value: get(row, item.fullKey), $index: index, column });
  9 + } else {
  10 + if (item.render.children instanceof Function) {
  11 + return h(
  12 + item.render.type,
  13 + { props: item.render.props, attrs: item.render.props, style: item.render.style },
  14 + item.render.children({ row, value: get(row, item.fullKey), $index: index, column })
  15 + );
  16 + }
  17 + return h(
  18 + item.render.type,
  19 + { props: item.render.props, attrs: item.render.props, style: item.render.style },
  20 + item.render.children || get(row, item.fullKey)
  21 + );
  22 + }
  23 + }
  24 +}
0 25 \ No newline at end of file
... ...
examples/views/page/table-new/editable.vue
  Diff comments   View file @600fee6
... ... @@ -37,10 +37,7 @@
37 37 :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
38 38 ></slot>
39 39 <!-- 如果表格列配置了值渲染参数 -->
40   - <component v-else-if="item.render" :is="item.render.type" v-bind="item.render.props" :style="item.render.style">
41   - <template v-if="item.render.children">{{ bindItemRenderChildren(item, { row, column, $index }) }}</template>
42   - <template v-else>{{ $_get(row, item.fullKey) }}</template>
43   - </component>
  40 + <cell-value-render v-else-if="item.render" :row="row" :column="column" :index="$index" :item="item" />
44 41 </cell-editable>
45 42 </template>
46 43 </el-table-column>
... ... @@ -58,6 +55,7 @@
58 55 <script>
59 56 import { cloneDeep, get, set } from '../form-new/util';
60 57 import CellEditable from './cell-editable';
  58 +import CellValueRender from './cell-value-render';
61 59  
62 60 const listHasKey = (list, name) => {
63 61 let result = false;
... ... @@ -72,7 +70,10 @@ const listHasKey = (list, name) =&gt; {
72 70  
73 71 export default {
74 72 name: 'TableNew',
75   - components: { CellEditable },
  73 + components: {
  74 + CellEditable,
  75 + CellValueRender,
  76 + },
76 77 props: {
77 78 // 用于实例化本组件绑定v-model的值
78 79 value: Array,
... ... @@ -245,10 +246,6 @@ export default {
245 246 }
246 247 return result;
247 248 },
248   - // 处理表格项渲染时的子值
249   - bindItemRenderChildren(item, scope) {
250   - return item.render.children instanceof Function ? item.render.children(scope) : this.$_get(scope.row, item.fullKey)
251   - },
252 249 // 双击单元格
253 250 onCellDblclick(row, column, cell, event) {
254 251 if (this.editable && !this.rowNew) {
... ...
examples/views/page/table-new/index.vue
  Diff comments   View file @600fee6
... ... @@ -25,10 +25,7 @@
25 25 :row="row" :value="$_get(row, item.fullKey)" :column="column" :index="$index"
26 26 ></slot>
27 27 <!-- 如果表格列配置了值渲染参数 -->
28   - <component v-else-if="item.render" :is="item.render.type" v-bind="item.render.props" :style="item.render.style">
29   - <template v-if="item.render.children">{{ bindItemRenderChildren(item, { row, column, $index }) }}</template>
30   - <template v-else>{{ $_get(row, item.fullKey) }}</template>
31   - </component>
  28 + <cell-value-render v-else-if="item.render" :row="row" :column="column" :index="$index" :item="item" />
32 29 </cell-render>
33 30 </template>
34 31 </el-table-column>
... ... @@ -44,6 +41,7 @@
44 41  
45 42 <script>
46 43 import { cloneDeep, get, set } from '../form-new/util';
  44 +import CellValueRender from './cell-value-render';
47 45  
48 46 export default {
49 47 name: 'TableNew',
... ... @@ -57,7 +55,8 @@ export default {
57 55 return h('span', get(this.row, this.item.agentKey || this.item.fullKey));
58 56 }
59 57 },
60   - }
  58 + },
  59 + CellValueRender
61 60 },
62 61 props: {
63 62 // 用于实例化本组件绑定v-model的值
... ... @@ -145,10 +144,6 @@ export default {
145 144 }
146 145 return result;
147 146 },
148   - // 处理表格项渲染时的子值
149   - bindItemRenderChildren(item, scope) {
150   - return item.render.children instanceof Function ? item.render.children(scope) : this.$_get(scope.row, item.fullKey)
151   - },
152 147 // 表格选中
153 148 onSelectionChange(selection) {
154 149 this.$emit('selection', selection);
... ...