Commit d0e206c501029b2b9889eb317f02bd772814e40d
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
src/components/table/cell.vue
| @@ -27,7 +27,8 @@ | @@ -27,7 +27,8 @@ | ||
| 27 | data () { | 27 | data () { |
| 28 | return { | 28 | return { |
| 29 | renderType: '', | 29 | renderType: '', |
| 30 | - uid: -1 | 30 | + uid: -1, |
| 31 | + content: this.$parent.$parent.content | ||
| 31 | } | 32 | } |
| 32 | }, | 33 | }, |
| 33 | computed: { | 34 | computed: { |
| @@ -43,7 +44,7 @@ | @@ -43,7 +44,7 @@ | ||
| 43 | methods: { | 44 | methods: { |
| 44 | compile () { | 45 | compile () { |
| 45 | if (this.column.render) { | 46 | if (this.column.render) { |
| 46 | - const $parent = this.$parent.$parent.$parent; | 47 | + const $parent = this.content; |
| 47 | const template = this.column.render(this.row, this.column, this.index); | 48 | const template = this.column.render(this.row, this.column, this.index); |
| 48 | const cell = document.createElement('div'); | 49 | const cell = document.createElement('div'); |
| 49 | cell.innerHTML = template; | 50 | cell.innerHTML = template; |
| @@ -59,7 +60,7 @@ | @@ -59,7 +60,7 @@ | ||
| 59 | } | 60 | } |
| 60 | }, | 61 | }, |
| 61 | destroy () { | 62 | destroy () { |
| 62 | - const $parent = this.$parent.$parent.$parent; | 63 | + const $parent = this.content; |
| 63 | for (let i = 0; i < $parent.$children.length; i++) { | 64 | for (let i = 0; i < $parent.$children.length; i++) { |
| 64 | if ($parent.$children[i]._uid === this.uid) { | 65 | if ($parent.$children[i]._uid === this.uid) { |
| 65 | $parent.$children[i].$destroy(); | 66 | $parent.$children[i].$destroy(); |
src/components/table/table-head.vue
| @@ -34,7 +34,7 @@ | @@ -34,7 +34,7 @@ | ||
| 34 | </div> | 34 | </div> |
| 35 | </div> | 35 | </div> |
| 36 | <div slot="content" :class="[prefixCls + '-filter-list']" v-else> | 36 | <div slot="content" :class="[prefixCls + '-filter-list']" v-else> |
| 37 | - <ul> | 37 | + <ul :class="[prefixCls + '-filter-list-single']"> |
| 38 | <li | 38 | <li |
| 39 | :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.length}]" | 39 | :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.length}]" |
| 40 | @click="handleReset($index)">全部</li> | 40 | @click="handleReset($index)">全部</li> |
src/components/table/table.vue
| @@ -122,6 +122,9 @@ | @@ -122,6 +122,9 @@ | ||
| 122 | default () { | 122 | default () { |
| 123 | return ''; | 123 | return ''; |
| 124 | } | 124 | } |
| 125 | + }, | ||
| 126 | + content: { | ||
| 127 | + type: Object | ||
| 125 | } | 128 | } |
| 126 | }, | 129 | }, |
| 127 | data () { | 130 | data () { |
| @@ -243,23 +246,25 @@ | @@ -243,23 +246,25 @@ | ||
| 243 | let autoWidthIndex = -1; | 246 | let autoWidthIndex = -1; |
| 244 | if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题 | 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,6 +507,7 @@ | ||
| 502 | } | 507 | } |
| 503 | }, | 508 | }, |
| 504 | compiled () { | 509 | compiled () { |
| 510 | + if (!this.content) this.content = this.$parent; | ||
| 505 | this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== ''; | 511 | this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== ''; |
| 506 | this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== ''; | 512 | this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== ''; |
| 507 | this.rebuildData = this.makeDataWithSortAndFilter(); | 513 | this.rebuildData = this.makeDataWithSortAndFilter(); |
test/routers/table.vue
| 1 | <template> | 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 | </template> | 5 | </template> |
| 4 | <script> | 6 | <script> |
| 5 | export default { | 7 | export default { |
| 6 | data () { | 8 | data () { |
| 7 | return { | 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 | name: '王小明', | 37 | name: '王小明', |
| 27 | age: 18, | 38 | age: 18, |
| @@ -44,6 +55,11 @@ | @@ -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 | \ No newline at end of file | 65 | \ No newline at end of file |
| 66 | +</script> |