other / mew-iview

Commit 744eb0af930ca4d3aaf5c03060948b7fa37a3bb1

Authored by 梁灏
1 parent 2cb8a6d9

update Table compoent 

update Table compoent
Showing 5 changed files with 81 additions and 8 deletions   Show diff stats
Inline Side-by-side
src/components/table/table-head.vue
  Show/Hide comments   View file @744eb0a
1 1 <template>
2 2 <thead>
3 3 <tr>
4   - <th v-for="column in columns">{{{ renderHeader(column, $index) }}}</th>
  4 + <th v-for="column in columns" :class="fixedCls(column)">{{{ renderHeader(column, $index) }}}</th>
5 5 </tr>
6 6 </thead>
7 7 </template>
... ... @@ -26,6 +26,9 @@
26 26 } else {
27 27 return column.title || '#';
28 28 }
  29 + },
  30 + fixedCls (column) {
  31 + return column.fixed ? `${this.prefixCls}-${column.fixed}` : '';
29 32 }
30 33 }
31 34 }
... ...
src/components/table/table.vue
  Show/Hide comments   View file @744eb0a
1 1 <template>
2 2 <div :class="classes">
3   - <div :class="[prefixCls + '-body']">
4   - <table>
  3 + <div :class="[prefixCls + '-header']">
  4 + <table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}">
5 5 <colgroup>
6   - <col v-for="column in columns" :width="column.width">
  6 + <col v-for="column in columns" :width="setCellWidth(column, $index)">
7 7 </colgroup>
8 8 <thead
9 9 is="table-head"
10 10 :prefix-cls="prefixCls + '-thead'"
11 11 :columns="columns"></thead>
  12 + </table>
  13 + </div>
  14 + <div :class="[prefixCls + '-body']">
  15 + <table cellspacing="0" cellpadding="0" border="0" :style="{width: tableWidth + 'px'}" v-el:tbody>
  16 + <colgroup>
  17 + <col v-for="column in columns" :width="setCellWidth(column, $index)">
  18 + </colgroup>
12 19 <tbody :class="[prefixCls + '-tbody']" v-el:render>
13 20 <tr :class="[prefixCls + '-row']" v-for="(index, row) in data">
14 21 <td v-for="column in columns">{{{ renderRow(row, column) }}}</td>
... ... @@ -20,7 +27,7 @@
20 27 </template>
21 28 <script>
22 29 import TableHead from './table-head.vue';
23   - import { oneOf } from '../../utils/assist';
  30 + import { oneOf, getStyle } from '../../utils/assist';
24 31 const prefixCls = 'ivu-table';
25 32  
26 33 export default {
... ... @@ -72,6 +79,8 @@
72 79 },
73 80 data () {
74 81 return {
  82 + tableWidth: 0,
  83 + columnsWidth: [],
75 84 prefixCls: prefixCls,
76 85 compiledUids: []
77 86 }
... ... @@ -108,7 +117,7 @@
108 117 const column = this.columns[i];
109 118 if (column.render) {
110 119 for (let j = 0; j < this.data.length; j++) {
111   - // todo 做一个深度缓存，只在需要改render时再重新编译，否则data改变时不用再编译
  120 + // todo 做一个缓存，只在需要改render时再重新编译，否则data改变时不用再编译
112 121 const row = this.data[j];
113 122 const template = column.render(row, column, j);
114 123 const cell = document.createElement('div');
... ... @@ -125,11 +134,28 @@
125 134 }
126 135 }
127 136 }
  137 + this.handleResize();
128 138 });
  139 + },
  140 + handleResize () {
  141 + this.tableWidth = parseInt(getStyle(this.$el, 'width'));
  142 + this.$nextTick(() => {
  143 + this.columnsWidth = [];
  144 + this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td').forEach((cell) => {
  145 + this.columnsWidth.push(parseInt(getStyle(cell, 'width')));
  146 + });
  147 + });
  148 + },
  149 + setCellWidth (column, index) {
  150 + return column.width ? column.width : this.columnsWidth[index];
129 151 }
130 152 },
131 153 ready () {
132 154 this.compileRender();
  155 + window.addEventListener('resize', this.handleResize, false);
  156 + },
  157 + beforeDestroy () {
  158 + window.removeEventListener('resize', this.handleResize, false);
133 159 },
134 160 watch: {
135 161 data: {
... ...
src/styles/components/index.less
  Show/Hide comments   View file @744eb0a
... ... @@ -27,4 +27,5 @@
27 27 @import "input";
28 28 @import "slider";
29 29 @import "cascader";
30   -@import "transfer";
31 30 \ No newline at end of file
  31 +@import "transfer";
  32 +@import "table";
32 33 \ No newline at end of file
... ...
src/styles/components/table.less
  Show/Hide comments   View file @744eb0a
  1 +@table-prefix-cls: ~"@{css-prefix}table";
  2 +
  3 +.@{table-prefix-cls} {
  4 + position: relative;
  5 + overflow: hidden;
  6 + box-sizing: border-box;
  7 + max-width: 100%;
  8 + background-color: #fff;
  9 + border-collapse: collapse;
  10 + border: 1px solid @border-color-base;
  11 + color: @text-color;
  12 + font-size: @font-size-small;
  13 +
  14 + &-large {
  15 + font-size: @font-size-base;
  16 + }
  17 +
  18 + & th {
  19 + white-space: nowrap;
  20 + overflow: hidden;
  21 + }
  22 +
  23 + & th,
  24 + td
  25 + {
  26 + min-width: 0;
  27 + height: 40px;
  28 + box-sizing: border-box;
  29 + text-align: left;
  30 + text-overflow: ellipsis;
  31 + vertical-align: middle;
  32 + position: relative;
  33 + border-bottom: 1px solid @border-color-base;
  34 + }
  35 +}
0 36 \ No newline at end of file
... ...
test/routers/table.vue
  Show/Hide comments   View file @744eb0a
... ... @@ -13,11 +13,15 @@
13 13 columns: [
14 14 {
15 15 title: '姓名',
16   - key: 'name'
  16 + key: 'name',
  17 + fixed: 'left',
  18 +// width: 100
17 19 },
18 20 {
19 21 title: '年龄',
20 22 key: 'age',
  23 + fixed: 'right',
  24 +// width: 100
21 25 // render (row) {
22 26 // return `<i-button>${row.age}</i-button>`
23 27 // }
... ... @@ -25,6 +29,8 @@
25 29 {
26 30 title: '地址',
27 31 key: 'address',
  32 + fixed: 'center',
  33 +// width: 100
28 34 // render (row, column, index) {
29 35 // if (row.edit) {
30 36 // return `<i-input :value.sync="data[${index}].name"></i-input>`;
... ... @@ -36,6 +42,7 @@
36 42 {
37 43 title: '操作',
38 44 key: 'action',
  45 +// width: 200,
39 46 render (row, column, index) {
40 47 return `<i-button @click="edit(${index})">编辑</i-button>`
41 48 }
... ... @@ -76,6 +83,7 @@
76 83 },
77 84 ready () {
78 85 setTimeout(() => {
  86 + return;
79 87 this.data.push({
80 88 name: '刘天娇2',
81 89 age: 272,
... ...