chenhaodong / mew-iview

Commit d0e206c501029b2b9889eb317f02bd772814e40d

Authored by 梁灏
1 parent 224a3ae5

Table add content prop to compile custom component 

Table add content prop to compile custom component
Showing 4 changed files with 55 additions and 32 deletions   Show diff stats
Inline Side-by-side
src/components/table/cell.vue
  Show/Hide comments   View file @d0e206c
... ... @@ -27,7 +27,8 @@
27 27 data () {
28 28 return {
29 29 renderType: '',
30   - uid: -1
  30 + uid: -1,
  31 + content: this.$parent.$parent.content
31 32 }
32 33 },
33 34 computed: {
... ... @@ -43,7 +44,7 @@
43 44 methods: {
44 45 compile () {
45 46 if (this.column.render) {
46   - const $parent = this.$parent.$parent.$parent;
  47 + const $parent = this.content;
47 48 const template = this.column.render(this.row, this.column, this.index);
48 49 const cell = document.createElement('div');
49 50 cell.innerHTML = template;
... ... @@ -59,7 +60,7 @@
59 60 }
60 61 },
61 62 destroy () {
62   - const $parent = this.$parent.$parent.$parent;
  63 + const $parent = this.content;
63 64 for (let i = 0; i < $parent.$children.length; i++) {
64 65 if ($parent.$children[i]._uid === this.uid) {
65 66 $parent.$children[i].$destroy();
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @d0e206c
... ... @@ -34,7 +34,7 @@
34 34 </div>
35 35 </div>
36 36 <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
37   - <ul>
  37 + <ul :class="[prefixCls + '-filter-list-single']">
38 38 <li
39 39 :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.length}]"
40 40 @click="handleReset($index)">全部</li>
... ...
src/components/table/table.vue
  Show/Hide comments   View file @d0e206c
... ... @@ -122,6 +122,9 @@
122 122 default () {
123 123 return '';
124 124 }
  125 + },
  126 + content: {
  127 + type: Object
125 128 }
126 129 },
127 130 data () {
... ... @@ -243,23 +246,25 @@
243 246 let autoWidthIndex = -1;
244 247 if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题
245 248  
246   - const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
247   - for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
248   - const column = this.cloneColumns[i];
  249 + if (this.data.length) {
  250 + const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
  251 + for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
  252 + const column = this.cloneColumns[i];
249 253  
250   - let width = parseInt(getStyle($td[i], 'width'));
251   - if (i === autoWidthIndex) {
252   - width = parseInt(getStyle($td[i], 'width')) - 1;
253   - }
254   - if (column.width) width = column.width;
  254 + let width = parseInt(getStyle($td[i], 'width'));
  255 + if (i === autoWidthIndex) {
  256 + width = parseInt(getStyle($td[i], 'width')) - 1;
  257 + }
  258 + if (column.width) width = column.width;
255 259  
256   - this.cloneColumns[i]._width = width;
  260 + this.cloneColumns[i]._width = width;
257 261  
258   - columnsWidth[column._index] = {
259   - width: width
  262 + columnsWidth[column._index] = {
  263 + width: width
  264 + }
260 265 }
  266 + this.columnsWidth = columnsWidth;
261 267 }
262   - this.columnsWidth = columnsWidth;
263 268 });
264 269 });
265 270 },
... ... @@ -502,6 +507,7 @@
502 507 }
503 508 },
504 509 compiled () {
  510 + if (!this.content) this.content = this.$parent;
505 511 this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
506 512 this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
507 513 this.rebuildData = this.makeDataWithSortAndFilter();
... ...
test/routers/table.vue
  Show/Hide comments   View file @d0e206c
1 1 <template>
2   - <i-table border :columns="columns1" :data="data1"></i-table>
  2 + <Card>
  3 + <i-table :content="self" border :columns="columns7" :data="data6"></i-table>
  4 + </Card>
3 5 </template>
4 6 <script>
5 7 export default {
6 8 data () {
7 9 return {
8   - columns1: [
  10 + self: this,
  11 + columns7: [
  12 +// {
  13 +// title: '姓名',
  14 +// key: 'name',
  15 +// render (row, column, index) {
  16 +// return `<strong>${row.name}</strong>`;
  17 +// }
  18 +// },
  19 +// {
  20 +// title: '年龄',
  21 +// key: 'age'
  22 +// },
  23 +// {
  24 +// title: '地址',
  25 +// key: 'address'
  26 +// },
9 27 {
10   - title: '姓名',
11   - key: 'name'
12   - },
13   - {
14   - title: '年龄',
15   - key: 'age',
16   - fixed: 'left',
17   -// width: 200
18   - },
19   - {
20   - title: '地址',
21   - key: 'address'
  28 + title: '操作',
  29 + key: 'action',
  30 + render (row, column, index) {
  31 + return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
  32 + }
22 33 }
23 34 ],
24   - data1: [
  35 + data6: [
25 36 {
26 37 name: '王小明',
27 38 age: 18,
... ... @@ -44,6 +55,11 @@
44 55 }
45 56 ]
46 57 }
  58 + },
  59 + methods: {
  60 + remove (index) {
  61 + this.data6.splice(index, 1);
  62 + }
47 63 }
48 64 }
49   -</script>
50 65 \ No newline at end of file
  66 +</script>
... ...