Commit 3aca3d56ef5219f9edcf3ab653efaeb4b0afcf2b
1 parent
71ef4865
fixed #1372
Showing
2 changed files
with
31 additions
and
17 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Table border :columns="columns4" :data="data1"></Table> | 2 | + <div> |
| 3 | + <Table highlight-row :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange"></Table> | ||
| 4 | + <Button @click="handleClear">clear</Button> | ||
| 5 | + </div> | ||
| 3 | </template> | 6 | </template> |
| 4 | <script> | 7 | <script> |
| 5 | export default { | 8 | export default { |
| 6 | data () { | 9 | data () { |
| 7 | return { | 10 | return { |
| 8 | - columns4: [ | 11 | + columns3: [ |
| 9 | { | 12 | { |
| 10 | - type: 'selection', | 13 | + type: 'index', |
| 11 | width: 60, | 14 | width: 60, |
| 12 | align: 'center' | 15 | align: 'center' |
| 13 | }, | 16 | }, |
| @@ -28,30 +31,33 @@ | @@ -28,30 +31,33 @@ | ||
| 28 | { | 31 | { |
| 29 | name: '王小明', | 32 | name: '王小明', |
| 30 | age: 18, | 33 | age: 18, |
| 31 | - address: '北京市朝阳区芍药居', | ||
| 32 | - _disabled: false, | ||
| 33 | - _checked: true | 34 | + address: '北京市朝阳区芍药居' |
| 34 | }, | 35 | }, |
| 35 | { | 36 | { |
| 36 | name: '张小刚', | 37 | name: '张小刚', |
| 37 | age: 25, | 38 | age: 25, |
| 38 | - address: '北京市海淀区西二旗', | ||
| 39 | - _disabled: true | 39 | + address: '北京市海淀区西二旗' |
| 40 | }, | 40 | }, |
| 41 | { | 41 | { |
| 42 | name: '李小红', | 42 | name: '李小红', |
| 43 | age: 30, | 43 | age: 30, |
| 44 | - address: '上海市浦东新区世纪大道', | ||
| 45 | - _disabled: true | 44 | + address: '上海市浦东新区世纪大道' |
| 46 | }, | 45 | }, |
| 47 | { | 46 | { |
| 48 | name: '周小伟', | 47 | name: '周小伟', |
| 49 | age: 26, | 48 | age: 26, |
| 50 | - address: '深圳市南山区深南大道', | ||
| 51 | - _disabled: true | 49 | + address: '深圳市南山区深南大道' |
| 52 | } | 50 | } |
| 53 | ] | 51 | ] |
| 54 | } | 52 | } |
| 53 | + }, | ||
| 54 | + methods: { | ||
| 55 | + handleClear () { | ||
| 56 | + this.$refs.table.clearCurrentRow(); | ||
| 57 | + }, | ||
| 58 | + handleChange (newData, oldData) { | ||
| 59 | + console.log(newData, oldData) | ||
| 60 | + } | ||
| 55 | } | 61 | } |
| 56 | } | 62 | } |
| 57 | </script> | 63 | </script> |
src/components/table/table.vue
| @@ -374,9 +374,8 @@ | @@ -374,9 +374,8 @@ | ||
| 374 | if (this.disabledHover) return; | 374 | if (this.disabledHover) return; |
| 375 | this.objData[_index]._isHover = false; | 375 | this.objData[_index]._isHover = false; |
| 376 | }, | 376 | }, |
| 377 | - highlightCurrentRow (_index) { | ||
| 378 | - if (!this.highlightRow || this.objData[_index]._isHighlight) return; | ||
| 379 | - | 377 | + // 通用处理 highlightCurrentRow 和 clearCurrentRow |
| 378 | + handleCurrentRow (type, _index) { | ||
| 380 | let oldIndex = -1; | 379 | let oldIndex = -1; |
| 381 | for (let i in this.objData) { | 380 | for (let i in this.objData) { |
| 382 | if (this.objData[i]._isHighlight) { | 381 | if (this.objData[i]._isHighlight) { |
| @@ -384,9 +383,18 @@ | @@ -384,9 +383,18 @@ | ||
| 384 | this.objData[i]._isHighlight = false; | 383 | this.objData[i]._isHighlight = false; |
| 385 | } | 384 | } |
| 386 | } | 385 | } |
| 387 | - this.objData[_index]._isHighlight = true; | 386 | + if (type === 'highlight') this.objData[_index]._isHighlight = true; |
| 388 | const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.cloneData[oldIndex])); | 387 | const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.cloneData[oldIndex])); |
| 389 | - this.$emit('on-current-change', JSON.parse(JSON.stringify(this.cloneData[_index])), oldData); | 388 | + const newData = type === 'highlight' ? JSON.parse(JSON.stringify(this.cloneData[_index])) : null; |
| 389 | + this.$emit('on-current-change', newData, oldData); | ||
| 390 | + }, | ||
| 391 | + highlightCurrentRow (_index) { | ||
| 392 | + if (!this.highlightRow || this.objData[_index]._isHighlight) return; | ||
| 393 | + this.handleCurrentRow('highlight', _index); | ||
| 394 | + }, | ||
| 395 | + clearCurrentRow () { | ||
| 396 | + if (!this.highlightRow) return; | ||
| 397 | + this.handleCurrentRow('clear'); | ||
| 390 | }, | 398 | }, |
| 391 | clickCurrentRow (_index) { | 399 | clickCurrentRow (_index) { |
| 392 | this.highlightCurrentRow (_index); | 400 | this.highlightCurrentRow (_index); |