other / mew-iview

Commit 87b6ef9d8ba27daad950f8dcdaae36d45f6da8ec

Authored by 梁灏
1 parent 687c4562

Table support real Render function to render Cell

Showing 2 changed files with 75 additions and 37 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @87b6ef9
1 1 <template>
2 2 <div>
3   - <Table border :context="self" :columns="columns7" :data="data6"></Table>
4   - <abc></abc>
  3 + <Table border :columns="columns7" :data="data6"></Table>
  4 + <Button @click="handleAdd"> + 1</Button>
5 5 </div>
6 6 </template>
7 7 <script>
... ... @@ -10,13 +10,23 @@
10 10 components: { abc },
11 11 data () {
12 12 return {
13   - self: this,
  13 + data1: 1,
  14 +// self: this,
14 15 columns7: [
15 16 {
16 17 title: '姓名',
17 18 key: 'name',
18   - render (row, column, index) {
19   - return `<abc></abc>`;
  19 +// render (row, column, index) {
  20 +// return `<abc></abc>`;
  21 +// }
  22 + render: (h, row, column, index) => {
  23 + return h('div', [
  24 + h('Button',{
  25 + on: {
  26 + click: this.handleClick
  27 + }
  28 + }, 'hello')
  29 + ])
20 30 }
21 31 },
22 32 {
... ... @@ -61,6 +71,11 @@
61 71 ]
62 72 }
63 73 },
  74 + computed: {
  75 + ttt () {
  76 + return this.data1 + 1;
  77 + }
  78 + },
64 79 methods: {
65 80 show (index) {
66 81 this.$Modal.info({
... ... @@ -70,6 +85,12 @@
70 85 },
71 86 remove (index) {
72 87 this.data6.splice(index, 1);
  88 + },
  89 + handleAdd () {
  90 + this.data1++;
  91 + },
  92 + handleClick () {
  93 + this.$Message.info('111')
73 94 }
74 95 }
75 96 }
... ...
src/components/table/cell.vue
  Show/Hide comments   View file @87b6ef9
... ... @@ -48,42 +48,59 @@
48 48 methods: {
49 49 compile () {
50 50 if (this.column.render) {
51   - const $parent = this.context;
52   - const template = this.column.render(this.row, this.column, this.index);
53   - const cell = document.createElement('div');
54   - cell.innerHTML = template;
  51 + // 兼容真 Render，后期废弃旧用法
  52 + let isRealRender = false;
  53 + try {
  54 + this.column.render(this.row, this.column, this.index);
  55 + }
  56 + catch (err) {
  57 + isRealRender = true;
  58 + }
55 59  
56   - this.$el.innerHTML = '';
57   - let methods = {};
58   - Object.keys($parent).forEach(key => {
59   - const func = $parent[key];
60   - if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) {
61   - methods[key] = func;
62   - }
63   - });
64   - const res = Vue.compile(cell.outerHTML);
65   - // todo 临时解决方案
  60 + if (isRealRender) {
  61 + const component = new Vue({
  62 + render: (h) => {
  63 + return this.column.render(h, this.row, this.column, this.index);
  64 + }
  65 + });
  66 + const Cell = component.$mount();
  67 + this.$refs.cell.appendChild(Cell.$el);
  68 + } else {
  69 + const $parent = this.context;
  70 + const template = this.column.render(this.row, this.column, this.index);
  71 + const cell = document.createElement('div');
  72 + cell.innerHTML = template;
66 73  
67   - // 获取父组件使用的局部 component
68   - const components = {};
69   - Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
70   - components[item] = $parent.$options.components[item];
71   - });
  74 + this.$el.innerHTML = '';
  75 + let methods = {};
  76 + Object.keys($parent).forEach(key => {
  77 + const func = $parent[key];
  78 + if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) {
  79 + methods[key] = func;
  80 + }
  81 + });
  82 + const res = Vue.compile(cell.outerHTML);
  83 + // 获取父组件使用的局部 component
  84 + const components = {};
  85 + Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
  86 + components[item] = $parent.$options.components[item];
  87 + });
72 88  
73   - const component = new Vue({
74   - render: res.render,
75   - staticRenderFns: res.staticRenderFns,
76   - methods: methods,
77   - data () {
78   - return $parent._data;
79   - },
80   - components: components
81   - });
82   - component.row = this.row;
83   - component.column = this.column;
  89 + const component = new Vue({
  90 + render: res.render,
  91 + staticRenderFns: res.staticRenderFns,
  92 + methods: methods,
  93 + data () {
  94 + return $parent._data;
  95 + },
  96 + components: components
  97 + });
  98 + component.row = this.row;
  99 + component.column = this.column;
84 100  
85   - const Cell = component.$mount();
86   - this.$refs.cell.appendChild(Cell.$el);
  101 + const Cell = component.$mount();
  102 + this.$refs.cell.appendChild(Cell.$el);
  103 + }
87 104 }
88 105 },
89 106 destroy () {
... ...