other / mew-iview

Commit e40c5352a1fc9344da50b24416dabee80da642e0

Authored by Aresn
1 parent 4f576611

fixed #1195 

fixed #1195 and abandon old Table render function
Showing 4 changed files with 45 additions and 105 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @e40c535
... ... @@ -11,6 +11,7 @@
11 11 {
12 12 type: 'expand',
13 13 render: (h) => {
  14 + console.log('______hover______');
14 15 return h(etable);
15 16 },
16 17 width: 50
... ...
src/components/table/cell.vue
  Show/Hide comments   View file @e40c535
... ... @@ -19,11 +19,9 @@
19 19 </div>
20 20 </template>
21 21 <script>
22   - import Vue from 'vue';
23 22 import Cell from './expand';
24 23 import Icon from '../icon/icon.vue';
25 24 import Checkbox from '../checkbox/checkbox.vue';
26   - import { findComponentUpward } from '../../utils/assist';
27 25  
28 26 export default {
29 27 name: 'TableCell',
... ... @@ -46,7 +44,7 @@
46 44 return {
47 45 renderType: '',
48 46 uid: -1,
49   - context: this.$parent.$parent.currentContext
  47 + context: this.$parent.$parent.$parent.currentContext
50 48 };
51 49 },
52 50 computed: {
... ... @@ -70,76 +68,11 @@
70 68 }
71 69 },
72 70 methods: {
73   - compile () {
74   - if (this.column.render && this.renderType === 'render') {
75   - // todo 兼容真 Render，后期废弃旧用法
76   - let isRealRender = true;
77   - const Table = findComponentUpward(this, 'Table');
78   - if (Table.context) isRealRender = false;
79   -
80   - if (isRealRender) {
81   -// this.$el.innerHTML = '';
82   -// const component = new Vue({
83   -// functional: true,
84   -// render: (h) => {
85   -// return this.column.render(h, {
86   -// row: this.row,
87   -// column: this.column,
88   -// index: this.index
89   -// });
90   -// }
91   -// });
92   -// const Cell = component.$mount();
93   -// this.$refs.cell.appendChild(Cell.$el);
94   - } else {
95   - const $parent = this.context;
96   - const template = this.column.render(this.row, this.column, this.index);
97   - const cell = document.createElement('div');
98   - cell.innerHTML = template;
99   -
100   - this.$el.innerHTML = '';
101   - let methods = {};
102   - Object.keys($parent).forEach(key => {
103   - const func = $parent[key];
104   - if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) {
105   - methods[key] = func;
106   - }
107   - });
108   - const res = Vue.compile(cell.outerHTML);
109   - // 获取父组件使用的局部 component
110   - const components = {};
111   - Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
112   - components[item] = $parent.$options.components[item];
113   - });
114   -
115   - const component = new Vue({
116   - render: res.render,
117   - staticRenderFns: res.staticRenderFns,
118   - methods: methods,
119   - data () {
120   - return $parent._data;
121   - },
122   - components: components
123   - });
124   - if ($parent.$store != undefined) {
125   - component.$store = $parent.$store;
126   - }
127   - component.row = this.row;
128   - component.column = this.column;
129   -
130   - const Cell = component.$mount();
131   - this.$refs.cell.appendChild(Cell.$el);
132   - }
133   - }
134   - },
135   - destroy () {
136   -
137   - },
138 71 toggleSelect () {
139   - this.$parent.$parent.toggleSelect(this.index);
  72 + this.$parent.$parent.$parent.toggleSelect(this.index);
140 73 },
141 74 toggleExpand () {
142   - this.$parent.$parent.toggleExpand(this.index);
  75 + this.$parent.$parent.$parent.toggleExpand(this.index);
143 76 }
144 77 },
145 78 created () {
... ... @@ -154,20 +87,6 @@
154 87 } else {
155 88 this.renderType = 'normal';
156 89 }
157   - },
158   - mounted () {
159   - this.$nextTick(() => {
160   - this.compile();
161   - });
162   - },
163   - beforeDestroy () {
164   - this.destroy();
165   - },
166   - watch: {
167   - naturalIndex () {
168   - this.destroy();
169   - this.compile();
170   - }
171 90 }
172 91 };
173 92 </script>
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @e40c535
... ... @@ -5,12 +5,13 @@
5 5 </colgroup>
6 6 <tbody :class="[prefixCls + '-tbody']">
7 7 <template v-for="(row, index) in data">
8   - <tr
9   - :class="rowClasses(row._index)"
10   - @mouseenter.stop="handleMouseIn(row._index)"
11   - @mouseleave.stop="handleMouseOut(row._index)"
12   - @click.stop="clickCurrentRow(row._index)"
13   - @dblclick.stop="dblclickCurrentRow(row._index)">
  8 + <table-tr
  9 + :row="row"
  10 + :prefix-cls="prefixCls"
  11 + @mouseenter.native.stop="handleMouseIn(row._index)"
  12 + @mouseleave.native.stop="handleMouseOut(row._index)"
  13 + @click.native.stop="clickCurrentRow(row._index)"
  14 + @dblclick.native.stop="dblclickCurrentRow(row._index)">
14 15 <td v-for="column in columns" :class="alignCls(column, row)">
15 16 <Cell
16 17 :fixed="fixed"
... ... @@ -25,7 +26,7 @@
25 26 :expanded="rowExpanded(row._index)"
26 27 ></Cell>
27 28 </td>
28   - </tr>
  29 + </table-tr>
29 30 <tr v-if="rowExpanded(row._index)">
30 31 <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
31 32 <Expand :key="row" :row="row" :render="expandRender" :index="row._index"></Expand>
... ... @@ -37,6 +38,7 @@
37 38 </template>
38 39 <script>
39 40 // todo :key="row"
  41 + import TableTr from './table-tr.vue';
40 42 import Cell from './cell.vue';
41 43 import Expand from './expand.js';
42 44 import Mixin from './mixin';
... ... @@ -44,7 +46,7 @@
44 46 export default {
45 47 name: 'TableBody',
46 48 mixins: [ Mixin ],
47   - components: { Cell, Expand },
  49 + components: { Cell, Expand, TableTr },
48 50 props: {
49 51 prefixCls: String,
50 52 styleObject: Object,
... ... @@ -72,16 +74,6 @@
72 74 }
73 75 },
74 76 methods: {
75   - rowClasses (_index) {
76   - return [
77   - `${this.prefixCls}-row`,
78   - this.rowClsName(_index),
79   - {
80   - [`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
81   - [`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
82   - }
83   - ];
84   - },
85 77 rowChecked (_index) {
86 78 return this.objData[_index] && this.objData[_index]._isChecked;
87 79 },
... ... @@ -91,9 +83,6 @@
91 83 rowExpanded(_index){
92 84 return this.objData[_index] && this.objData[_index]._isExpanded;
93 85 },
94   - rowClsName (_index) {
95   - return this.$parent.rowClassName(this.objData[_index], _index);
96   - },
97 86 handleMouseIn (_index) {
98 87 this.$parent.handleMouseIn(_index);
99 88 },
... ...
src/components/table/table-tr.vue 0 → 100644
  Show/Hide comments   View file @e40c535
  1 +<template>
  2 + <tr :class="rowClasses(row._index)"><slot></slot></tr>
  3 +</template>
  4 +<script>
  5 + export default {
  6 + props: {
  7 + row: Object,
  8 + prefixCls: String
  9 + },
  10 + computed: {
  11 + objData () {
  12 + return this.$parent.objData;
  13 + }
  14 + },
  15 + methods: {
  16 + rowClasses (_index) {
  17 + return [
  18 + `${this.prefixCls}-row`,
  19 + this.rowClsName(_index),
  20 + {
  21 + [`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
  22 + [`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
  23 + }
  24 + ];
  25 + },
  26 + rowClsName (_index) {
  27 + return this.$parent.$parent.rowClassName(this.objData[_index], _index);
  28 + },
  29 + }
  30 + };
  31 +</script>
0 32 \ No newline at end of file
... ...